✎ Technique: The main landmark
Source: https://accessibility.huit.harvard.edu/technique-main-landmark Parent: https://accessibility.huit.harvard.edu/structure-developers
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.
Examples
✓ 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.
<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
See also: