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>