region
Web validation
Screen-reader users rely on landmark regions to skim pages quickly and understand which parts serve which purpose. When every portion of the interface lives in landmarks such as banner (<header>), navigation (<nav>), main, complementary (<aside>), and contentinfo (<footer>), they can move between sections with a single command instead of stepping through every element. Omitting landmarks forces users to hunt for information and can blur the page’s hierarchy.
Pass Patterns
Using native HTML landmarks
This layout exposes clear, unique regions that assistive technology can announce and navigate.
<body>
<header>Site header</header>
<nav>Main navigation</nav>
<main>
<article>Page content</article>
</main>
<footer>Site footer</footer>
</body>Using ARIA landmark roles
ARIA roles provide equivalent semantics without changing the markup structure.
<body>
<div role="banner">Site header</div>
<div role="navigation">Main navigation</div>
<div role="main">
<article>Page content</article>
</div>
<div role="contentinfo">Site footer</div>
</body>Fail Patterns
Content outside any landmark
With no landmarks, screen-reader users cannot jump directly to key areas.
<body>
<div class="wrapper">
<div class="logo">Logo</div>
<div class="links">Links</div>
<div class="article">Content</div>
</div>
</body>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader and go to the elements list (NVDA
Insert+F7, VoiceOverControl+Option+U). - Navigate to the “Landmarks” section.
Expected result: The landmark list contains landmark elements like banner, main, contentinfo, and navigation, and all page content sits inside them.
Actual result: The landmark list is empty, or some page content isn't inside any landmark.
FAQ
Why is this validation considered a best practice?
Landmark navigation is not strictly required by WCAG, but it dramatically improves non-visual browsing efficiency. Adding meaningful regions is low-effort for developers and offers an immediate usability gain.
Why is this issue marked as Moderate?
The lack of landmarks hampers orientation yet rarely blocks access completely. Users can still reach content, but the journey is slower and cognitively heavier, especially on complex pages or when using older assistive-technology shortcuts.