What This Rule Checks
Pages should contain exactly one main landmark region so assistive technology users can quickly navigate to the primary content. Missing or multiple main landmarks create confusion about where the core page content resides.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Screen reader users use the main landmark as a shortcut to jump directly to the primary content, bypassing navigation and header content. Without a main landmark, users must manually navigate through the entire page to find the primary content area.
How to Fix
Add a single <main> element or role=”main” to wrap the primary content area. Remove duplicate main landmarks if present. Ensure navigational, header, and footer content is outside the main region.
Code Examples
<!-- Page with no main landmark -->
<body>
<header>...</header>
<div class="content">
Page content here
</div>
<footer>...</footer>
</body>
Copy
<!-- Page with exactly one main landmark -->
<body>
<header>...</header>
<main>
Page content here
</main>
<footer>...</footer>
</body>
Copy
Common Mistakes to Avoid
- Using <div class=”main”> instead of the semantic <main> element.
- Having zero or multiple <main> elements on a page.
- Nesting <main> inside another landmark instead of placing it at the top level.
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.