What This Rule Checks
The role=”main” landmark, which designates the primary content of the page, should not be nested within other ARIA landmarks such as role=”banner”, role=”navigation”, or role=”contentinfo”. The main landmark helps screen reader users quickly identify and navigate to the central content on the page.
Who Is Affected
This issue primarily affects: 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; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
The main landmark must be a top-level landmark for screen reader users to navigate to it via shortcut keys. Nesting it removes it from the primary landmark navigation list.
How to Fix
Place the Main Landmark at the Top Level: Ensure that any element with role=”main” or the <main> element in HTML5 is top-level and not nested inside other landmark elements like role=”navigation” or role=”banner”.
Use HTML5 and ARIA Together: Combine HTML5 landmarks (e.g., <main>, <header>, <footer>) with their ARIA counterparts (e.g., role=”main”, role=”banner”, role=”contentinfo”) to make your webpage more robust and accessible for different types of assistive technologies.
Code Examples
<!-- Main nested inside another landmark -->
<div role="region">
<main>
Page content
</main>
</div>
Copy
Common Mistakes to Avoid
- Wrapping <main> in a generic container with a landmark role.
- Nesting <main> inside <section> or another semantic element.
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.