Skip to main content

2. Landmarks and sections

For users interacting with your website using a screen reader, landmarks provide a way to navigate between the high-level sections of your site quickly.

For example, navigating using landmarks allows people to jump to the main content, bypassing repetitive header and navigation options.


🪄

Putting it into action

  • Use landmarks to identify the web page's header, navigation, footers, main content area, and supporting content areas.
  • Use landmarks sparingly to create a high-level document outline. While very helpful for screen reader users, they can quickly become less valuable when every section of the page is a landmark. Instead, use proper heading levels to create sections.
  • Give landmarks a name, especially if there are 2 of the same type. For example, if you have a primary and secondary navigation menu, these should each be given a landmark with a name, such as <nav aria-label="primary"> and <nav aria-label="secondary"> </aside>