✎ Technique: The main landmark

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