WCAG 2.2 Fix Guide

How to Fix Content Not in Landmark Region WCAG

All visible page content must be contained within a landmark region — <header>, <nav>, <main>, <aside>, <footer>, or an element with a role= landmark attribute. Content outside landmarks is unreachable by screen reader landmark navigation.

WCAG 2.2 Best Practice — supports 1.3.1 and 2.4.1 axe-core: region

Why this matters

Screen reader users use landmark navigation to jump around pages efficiently. If content sits outside any landmark, they can miss it entirely. This is especially common with cookie banners, modals, and content injected by JavaScript.

Code examples

✗ Incorrect — fails WCAG
<body>
  <main>...</main>
  <div class="cookie-banner">We use cookies...</div>
  <div class="newsletter">Subscribe...</div>
</body>
✓ Correct — passes WCAG
<body>
  <main>...</main>
  <aside aria-label="Cookie notice">
    <div class="cookie-banner">We use cookies...</div>
  </aside>
  <footer>
    <div class="newsletter">Subscribe...</div>
  </footer>
</body>

How to fix it — step by step

  1. 1
    Wrap every visible section of your page in a semantic HTML5 landmark element
  2. 2
    Use <header> for site header, <nav> for navigation, <main> for primary content
  3. 3
    Use <footer> for site footer, <aside> for sidebars and supplementary content
  4. 4
    For repeated nav elements, add aria-label to distinguish them (e.g. aria-label='Main navigation')
  5. 5
    Check with browser DevTools accessibility inspector — it shows your landmark structure
  6. 6
    Dynamic content injected by JS must also be inside a landmark
Reference: WCAG 2.2 Best Practice — supports 1.3.1 and 2.4.1

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.