What This Rule Checks
Landmark regions are sections of a webpage that help screen readers and assistive technologies understand the page structure, enabling users to navigate quickly to different sections like headers, navigation bars, main content, and footers. Proper use of HTML5 or ARIA landmarks ensures accessibility by guiding users to key areas on a 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
Content outside landmark regions is harder for screen reader users to discover and navigate to. Landmarks serve as a table of contents for the page layout. Orphaned content may be skipped entirely during landmark-based navigation.
How to Fix
To make content more accessible:
Use Native HTML5 Landmarks: prefer native HTML5 elements (<header>, <nav>, <main>, <footer>) when possible.
Use ARIA Landmarks Where Necessary: if HTML5 landmarks are not suitable, you can use ARIA roles like role=”banner”, role=”navigation”, role=”main”, or role=”contentinfo”.
Code Examples
<!-- Content outside any landmark -->
<body>
<div class="sidebar">
Sidebar content
</div>
<div class="content">
Main content
</div>
</body>
Copy
<!-- All content within landmarks -->
<body>
<header>
Logo and navigation
</header>
<nav aria-label="Primary">
Menu items
</nav>
<main>
Main content
</main>
<aside>
Sidebar content
</aside>
<footer>
Footer content
</footer>
</body>
Copy
Common Mistakes to Avoid
- Leaving content between landmarks without a container.
- Not wrapping sidebar content in <aside>.
- Forgetting to use <main> as the primary content wrapper.
- Having orphaned content after the footer.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
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.