ADA Compliance Professionals

    Main landmark to skip repeated blocks

    Last updated:

    Who it helps:
    Blind
    Mobility
    Cognitive
    Standard:
    WCAG 2.2 Level A

    Related Guides

    Each page must include one main landmark to bypass repeated content

    Every page must expose a single main landmark for the primary content.

    This lets users bypass headers, navigation, and other repeated blocks to reach what matters.

    It especially supports people who rely on keyboards, screen readers, and alternative input devices.

    Why It Matters

    For keyboard-only users, moving past large headers and menus one link at a time is slow and exhausting. A main landmark provides a quick jump to content.

    Screen reader users can navigate directly to the main region via landmarks, reducing time and cognitive load.

    People with mobility impairments may avoid unnecessary keystrokes that can cause fatigue or pain.

    Common Causes

    • No <main> element or role="main" in the page template.
    • Multiple main landmarks created by layout components or CMS blocks.
    • Placing <main> inside <article>, <section>, <aside>, <header>, <footer>, or <nav>.
    • Adding role="main" to more than one element, or redundantly on a <main> element.
    • Re-using a layout partial that injects another main landmark in subpages or modals.

    How to Fix

    1. Add exactly one main landmark:
      • Preferred: wrap the primary content in a single <main> element.
      • If you cannot use <main> (legacy markup), put role="main" on one container.
    2. Place it correctly:
      • Position the main landmark after site-wide repeated blocks (header, global nav, banners, ads).
      • Do not nest <main> inside other sectioning or landmark elements.
    3. Keep it unique and unambiguous:
      • Ensure there is only one main landmark per page.
      • Avoid giving the main landmark an accessible name (no aria-label), since it must be unique.
      • Do not add role="main" to a <main> element; the element already conveys that role.
    4. Recommendation for keyboards (strongly encouraged):
      • Add a visible on-focus "Skip to main content" link that targets the main container.
    HTML
    !doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    .skip-link { position:absolute; left:-9999px; top:auto; }
    .skip-link:focus { left: 1rem; top: 1rem; background:#fff; padding:.5rem 1rem; border:2px solid #000; }
  </style>
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header>...site header...</header>
  <nav>...primary navigation...</nav>
  <main id="main-content">
    <h1>Page heading</h1>
    <p>Primary content goes here.</p>
  </main>
  <footer>...footer...</footer>
</body>
</html>

    How to Test

    • Code/DOM check:
    • Confirm there is exactly one <main> element, or one element with role="main".
    • Verify <main> is not inside <article>, <section>, <aside>, <header>, <footer>, or <nav>.
    • Keyboard check:
    • If a skip link exists, press Tab on page load and confirm the "Skip to main content" link appears and moves focus to the main region.
    • After activation, focus should land at the start of the main content.
    • Screen reader check:
    • NVDA, JAWS, VoiceOver, or TalkBack: open the landmarks list/rotor and ensure there is exactly one Main landmark.
    • Use landmark navigation to jump to Main and confirm the reading cursor starts at primary content.
    • Browser accessibility tree:
    • In devtools accessibility panel, verify one Main landmark is exposed.
    • Mobile/touch check:
    • iOS VoiceOver rotor > Landmarks: locate "Main" and navigate to it.
    • Android TalkBack local context menu > Landmarks: ensure a single Main is present.

    Good Example

    HTML
    <header>
  <div>Brand and site-wide header</div>
</header>
<nav>
  <ul><li><a href="#">Home</a></li><li><a href="#">Shop</a></li></ul>
</nav>
<main id="content">
  <h1>Order History</h1>
  <p>Your recent orders appear below.</p>
</main>
<footer>
  <div>© Example Co.</div>
</footer>

    Bad Example

    HTML
    <header>Header</header>
<section>
  <main>
    <h1>News</h1>
  </main>
</section>
<div role="main">
  <h2>Also main?</h2>
</div>
<nav>Footer links</nav>

    Quick Checklist

    • Exactly one main landmark per page.
    • Use <main> (preferred) or role="main" on a single container.
    • Place main after repeated site-wide content.
    • Do not nest <main> inside other sectioning/landmark elements.
    • Avoid aria-label on the main landmark.
    • Do not add role="main" to a <main> element.
    • Recommended: include a "Skip to main content" link that targets the main region.
    • Verify with a screen reader that one Main landmark is exposed and reachable.