WCAG 2.2 Fix Guide

How to Fix Missing Main Landmark WCAG 2.2

Every page must have exactly one <main> element (or an element with role='main'). The main landmark identifies the primary content of the page, separate from headers, footers, and navigation.

WCAG 2.2 Success Criterion 1.3.6 (Level AAA) and best practice for 2.4.1 axe-core: landmark-one-main

Why this matters

Screen reader users navigate by jumping between landmarks — header, nav, main, footer. Without a main landmark they can't skip to the primary content. This is especially important for keyboard users who have to tab through every navigation link before reaching content.

Code examples

✗ Incorrect — fails WCAG
<body>
  <header>...</header>
  <div class="content">...</div>
  <footer>...</footer>
</body>
✓ Correct — passes WCAG
<body>
  <header>...</header>
  <nav>...</nav>
  <main id="main-content">
    <!-- Primary page content here -->
  </main>
  <footer>...</footer>
</body>

How to fix it — step by step

  1. 1
    Wrap your primary page content in a <main> element
  2. 2
    Use only one <main> element per page
  3. 3
    Add id='main-content' so your skip link can point to it
  4. 4
    Don't put navigation, header, or footer content inside <main>
  5. 5
    For WordPress: wrap the_content() and main page sections in <main>
  6. 6
    Pair with a skip link: <a href='#main-content'>Skip to main content</a>
Reference: WCAG 2.2 Success Criterion 1.3.6 (Level AAA) and best practice for 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.