HTML5 elements such as main, nav, and aside act as landmarks,
or special regions on the page to which
screen readers and other assistive technologies can jump.
By using landmark elements,
you can dramatically improve the navigation experience on your site
for users of assistive technology.
Learn more in Deque University's
HTML 5 and ARIA Landmarks.
How to manually check landmarks
Use the W3C's list of landmark elements to check that each major section of your page is contained by a landmark element. For example:
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
You can also use tools like Microsoft's Accessibility Insights extension to visualize your page structure and catch sections that aren't contained in landmarks:
How to use landmarks effectively
- Use landmark elements to define major sections of your page
instead of relying on generic elements like
<div>or<span>. - Use landmarks to convey the structure of your page.
For example, the
<main>element should include all content directly related to the page's main idea, so there should only be one per page. See MDN's summary of content sectioning elements to learn how to use each landmark. - Use landmarks judiciously. Having too many landmarks can actually make navigation more difficult for assistive technology users because it prevents them from easily skipping to a desired piece of content.
See the Headings and landmarks post for more information.