What This Rule Checks
Landmarks help users of assistive technologies navigate a webpage more easily by providing distinct and meaningful sections of the content. To avoid confusion, each landmark, such as main, header, footer, form, and aside, should have a unique identifier. Duplicate landmarks, especially with the same labels or roles, make it difficult for screen readers to distinguish between them.
Who Is Affected
This issue primarily affects: Sighted users, who have sighted-related needs; Keyboard Users users, who have keyboard users-related needs; Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
When multiple landmarks of the same type exist, screen readers list them identically (e.g., “navigation, navigation, navigation”). Without unique labels, users cannot determine which landmark leads where.
How to Fix
- Ensure each landmark on your page is unique by either:
- Assigning unique id attributes to each landmark element (e.g., <main>, <header>, <footer>).
- Using distinct aria-label or aria-labelledby attributes to differentiate landmarks when necessary.
Code Examples
<!-- Multiple nav landmarks with no labels -->
<nav>
Primary menu
</nav>
<nav>
Footer links
</nav>
Copy
<!-- Labeled nav landmarks -->
<nav aria-label="Primary">
Main menu items
</nav>
<nav aria-label="Footer">
Footer links
</nav>
Copy
Common Mistakes to Avoid
- Having multiple landmarks of the same type without unique aria-label values.
- Using the same aria-label on different landmarks.
- Not labeling navigation landmarks when a page has more than one.
Tip: Landmark regions let screen reader users jump directly to key sections of a page. They serve as the accessibility equivalent of a table of contents for page layout. Label landmarks when multiple of the same type exist.