Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Latest commit

 

History

History
80 lines (68 loc) · 3.18 KB

index.md

File metadata and controls

80 lines (68 loc) · 3.18 KB
Raw
layout title description date updated web_lighthouse
layouts/doc-post.njk
HTML5 landmark elements are used to improve navigation
Learn how to improve the accessibility of your web page by providing landmarks that keyboard users can use to navigate.
2019-05-02
2019-09-19
use-landmarks
managed-focus

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:

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EUH3Yz64EbuAI0GKQoWa.png", alt="Screenshot of web.dev with landmarks highlighted by the Accessibility Insights extension", width="800", height="534" %}

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.

{% Aside %} If you find that your page has, for example, four <nav> elements or ten <aside> elements, that may suggest a need to simplify your user interface or content structure, which will likely benefit all users. {% endAside %}

See the Headings and landmarks post for more information.

Resources