Manually check landmark elements improve navigation

HTML5 elements such as main, nav, and aside act as landmarks, or special regions on the page to which a screen reader can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assitive technology. Learn more in HTML 5 and ARIA Landmarks.

How to manually test

To check landmark elements improve navigation, check that each major section of your page is a landmark element: For example:

<header role="banner">
<p>Put product name and logo here</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here</p>
</footer>

Use this list of landmark elements to check your page. Click the "Show Landmarks" button to see a structural outline for the page.

How to fix

Use landmark tags to define major sections of your page, instead of relying on divs. Be careful not to go overboard because having too many landmarks can be overwhelming. For example, stick to just one main element instead of 3 or 4.

Learn more in Headings and landmarks.

More information

Last updated: Improve article