Main landmark must be top-level only

The main landmark must be top-level and not nested inside other landmarks

The main landmark must be a top-level region and never be contained within another landmark. This structure helps assistive technologies provide reliable landmark navigation. Pages should use clear header, navigation, main content, and footer regions so users can find content quickly.

Why It Matters

Landmarks give screen reader and keyboard users quick ways to jump to major sections. If the main landmark is nested or missing, users may not find the primary content or may encounter confusing landmark lists.

People with low vision, blindness, or limited mobility depend on landmarks to reduce navigation effort. Poor landmark structure forces extra keystrokes and increases cognitive load.

Common Causes

• Placing <main> inside <header>, <nav>, <footer>, <aside>, or other landmark containers
• Multiple <main> elements on a single page (or multiple role="main")
• Missing top-level header/banner or footer/contentinfo landmarks
• Framework wrappers that surround everything (including <main>) with a landmark <div>
• Using role="application" on a large container, collapsing standard landmarks
• Copy-paste templates that repeat banners or footers inside content areas

How to Fix

1. Use semantic landmarks:
   • Header: <header> (banner landmark)
   • Navigation: <nav> (navigation landmark)
   • Main content: <main> (main landmark)
   • Footer: <footer> (contentinfo landmark)
2. Keep main top-level:
   • Have exactly one <main> per page (iframes can have their own).
   • Ensure <main> is not inside any other landmark (header, nav, aside, footer, complementary, region, etc.).
3. Scope header and footer correctly:
   • At the page level, use one banner (<header>) and one contentinfo (<footer>). Component-level headers/footers are allowed inside articles/sections but should not be exposed as page-level landmarks.
4. Label multiple navigations:
   • If you have more than one <nav> (e.g., Primary, Footer, Sidebar), use aria-label or aria-labelledby to distinguish them.
5. Prefer native semantics:
   • Recommendation: rely on HTML5 elements, which have implicit landmark roles. Add ARIA roles only when using non-semantic containers that must be announced as landmarks.
6. Avoid anti-patterns:
   • Do not wrap the whole page (or <main>) in role="application".
   • Do not duplicate landmark roles on elements that already have them unless there is a specific need.
7. Single-page apps:
   • Keep one persistent <main>. Update its contents on route change and move focus into a meaningful heading or the main region.

How to Test

Keyboard check:

• Use the "Skip to main content" link. Confirm focus moves into the <main> region.
• Tab through the page; ensure you do not enter <main> through nested landmarks like <nav> or <header>.

Screen reader check:

• Open the landmarks list/rotor. You should see one Main, one Banner, one Content Info, and any Navigation landmarks.
• Navigate directly to Main from Banner; verify Main is not reported as inside another region.
• Confirm multiple navs are labeled distinctly (e.g., "Primary Navigation", "Footer Navigation").

Mobile/touch check:

• iOS VoiceOver: Use the Rotor > Landmarks to jump among Banner, Navigation, Main, Content Info.
• Android TalkBack: Use the local context menu to navigate by landmarks and confirm a single, top-level Main.

Developer tools check:

• Inspect the accessibility tree in browser devtools. Verify one top-level Main node and that it is not a child of other landmarks.

Good Example

<header>
  <a class="skip-main" href="#content">Skip to main content</a>
  <h1>Example Site</h1>
</header>

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main id="content">
  <h2>Welcome</h2>
  <p>This is the primary content area.</p>
</main>

<footer>
  <small>© 2026 Example Co.</small>
</footer>

Bad Example

<header>
  <h1>Example Site</h1>
  <!-- Incorrect: main is nested inside another landmark -->
  <main>
    <h2>Latest News</h2>
    <p>Primary content placed inside header.</p>
  </main>
</header>

<!-- Also problematic: extra main nested in a region -->
<section role="region" aria-label="Content Wrapper">
  <main>
    <p>Duplicate main inside a region.</p>
  </main>
</section>

Quick Checklist

• Exactly one <main> per page; not nested inside any landmark
• One page-level <header> (banner) and one page-level <footer> (contentinfo)
• <nav> landmarks are labeled if more than one navigation exists
• Use native HTML5 landmarks; add ARIA roles only when necessary
• Provide a Skip to main content link targeting <main>
• Do not use role="application" on page wrappers
• Verify the accessibility tree shows a single, top-level Main
• In screen readers, Main appears once and is not inside Banner/Nav/Footer