Landmarks help assistive-technology users navigate to and between areas of a page, and they improve the efficiency of in-page navigation.
Landmarks are to sections what continents are to countries—they help break the interface up into a few large, semantically distinct areas such as headers, footers and navigation blocks. The main landmark defines the unique content of the page: the most likely reason a user visited the page in the first place.
✓ Using the WAI-ARIA landmark role
WAI-ARIA provides a set of landmark roles that can be used to identify different semantically meaningful sections of a page, like the header and footer. The attribute
role="main" should be used to identify the start of the page's unique content, and it should be used on a block level element, like a
<div role="main"> <!-- the main, unique content of the page --> </div>
✓ Using the main element
It's quicker to just use the
main element. In this case, the ARIA role and the equivalent HTML5 element provide exactly the same semantics to screen-reader users. Modern screen readers provide landmark navigation shortcuts; for example, a JAWS user can navigate to main landmarks using the 'q' key, which allows them to skip preamble such as the site logo and navigation.
<main> <!-- the main, unique content of the page --> </main>
Video: Landmark navigation using JAWS