Missing ARIA Landmarks and Semantic HTML
axe DevTools (rule: region, landmark-one-main, landmark-unique), WAVE (structural elements panel), Lighthouse (partial detection via heading-order and bypass rules)
Why it matters
Screen reader users navigate complex pages using landmarks — structural regions of the page that screen readers expose as a "landmarks menu." Using the VoiceOver rotor or NVDA landmarks shortcut, a user can instantly jump to the navigation, main content, search, or footer without tabbing through everything. Without landmarks, screen reader users must listen to or tab through every element from the top of the page to find what they need — on a typical website, that means dozens of navigation links before reaching the main content on every page. The skip navigation link (WCAG 2.4.1, Level A) is the minimum fix, but landmark regions provide a much richer navigation experience. The WebAIM Million survey found that proper landmark usage is missing on over 75% of analyzed homepages.
Symptoms — what you'll see
If your site has this problem, you may observe any of the following:
- Screen reader cannot jump directly to main content, navigation, or footer
- VoiceOver/NVDA landmarks list is empty or shows only generic regions
- All page content is in undifferentiated <div> elements with no semantic meaning
- Users must tab through entire header/navigation on every page to reach main content
- No skip navigation link available for keyboard users
- axe DevTools flags "region" rule violations — all content not within landmark
- WAVE shows missing structural/landmark elements
Common causes
- Sites built entirely with <div> elements, common in older codebases and frameworks
- CMS themes and page builders that output divs instead of semantic HTML5 elements
- Component libraries that wrap everything in <div> without exposing landmark role props
- Developers unfamiliar with HTML5 semantic elements introduced in 2014
- Copy-pasting HTML templates without understanding semantic structure
- JavaScript frameworks that render fragments without semantic wrapper elements
- Migration from table-based layouts that used generic containers throughout
How to fix it
- 1Replace generic <div id="nav"> with semantic <nav> (or add role="navigation" as a fallback).
- 2Wrap your primary page content in <main> (or role="main") — there should be exactly one per page.
- 3Wrap site header content in <header> (or role="banner").
- 4Wrap site footer in <footer> (or role="contentinfo").
- 5Wrap sidebar content in <aside> (or role="complementary").
- 6Add a skip navigation link as the very first element in <body>: <a href="#main-content" class="skip-link">Skip to main content</a>.
- 7Label multiple landmarks of the same type with aria-label or aria-labelledby to distinguish them (e.g., two <nav> elements labeled "Primary navigation" and "Footer navigation").
- 8Ensure all page content is contained within a landmark region — axe's "region" rule flags content outside landmarks.
Code example
<!-- BROKEN: no landmarks, all divs -->
<body>
<div id="header">
<div id="nav"><!-- navigation --></div>
</div>
<div id="content">
<div id="sidebar"><!-- sidebar --></div>
<div id="main"><!-- main content --></div>
</div>
<div id="footer"><!-- footer --></div>
</body><!-- FIXED: semantic landmarks -->
<body>
<!-- Skip link: first focusable element -->
<a href="#main" class="skip-link">Skip to main content</a>
<header role="banner">
<nav aria-label="Primary navigation"><!-- navigation --></nav>
</header>
<main id="main">
<aside aria-label="Related articles"><!-- sidebar --></aside>
<!-- main content -->
</main>
<footer role="contentinfo">
<nav aria-label="Footer navigation"><!-- footer nav --></nav>
</footer>
</body>How to test your fix
After applying the fix, verify it works using these testing steps:
- Open VoiceOver (Mac: Cmd+F5) and use the Rotor (Ctrl+Option+U) to navigate to "Landmarks" — list should show main, navigation, header, footer.
- Install NVDA and use Insert+F7 to open the Elements List, then select "Landmarks" to see all landmark regions.
- Run axe DevTools and look for "region" and "landmark-one-main" violations.
- Tab to the very first element of the page — it should be a visible skip navigation link.
- Check with WAVE: look for blue structural icons (header, nav, main, aside, footer) on each page.
- In Chrome DevTools, open Accessibility panel and inspect the landmark roles in the accessibility tree.
Frequently asked questions
What is the difference between HTML5 semantic elements and ARIA landmark roles?+
HTML5 semantic elements (<main>, <nav>, <header>, <footer>, <aside>, <section>) have implied ARIA roles built in. <main> implies role="main", <nav> implies role="navigation", etc. Using semantic HTML is preferred over adding role attributes to divs because it is cleaner and more widely supported. Add role attributes only as fallbacks for older browsers or when you cannot use the semantic element.
Can I have multiple <nav> elements on a page?+
Yes. Multiple navigation landmarks are expected and appropriate — for example, a primary navigation, a breadcrumb navigation, and a footer navigation. When you have multiple landmarks of the same type, label each with aria-label (e.g., aria-label="Primary navigation", aria-label="Footer navigation") so screen reader users can distinguish them in the landmarks list.
What is a skip navigation link and do I need one?+
A skip navigation link is typically the first focusable element on the page, allowing keyboard users to bypass repeated navigation and jump directly to the main content. WCAG 2.4.1 (Level A) requires a mechanism to skip blocks of content repeated across pages. While landmark regions provide an alternative mechanism, a visible skip link is the most universally accessible solution. It should be visible on focus (can be hidden until focused).
Does every section of a page need to be wrapped in a landmark?+
Not every section, but all content should be within at least one landmark region. The axe rule "region" flags content that is not contained within any landmark. At minimum: wrap your primary content in <main>, navigation in <nav>, header in <header>, and footer in <footer>. Content like promotional banners within <main> does not need its own landmark.
Do ARIA landmarks help with SEO?+
Google's crawlers understand HTML5 semantic elements and use landmark structure to understand page hierarchy. <main> content is weighted more heavily than sidebar or footer content. Using proper semantic HTML benefits both accessibility and SEO, though the SEO impact is secondary to the accessibility benefit.