Banner landmark must be top-level

Last updated: March 2026

Who it helps:

Blind

Standard:

WCAG 2.2 Level A

Related Guides

Banner landmark must not be contained within any other landmark

The banner landmark must be a top-level landmark, not a descendant of any other landmark.

This issue appears when a page header or role="banner" sits inside main, nav, complementary, region, or other landmarks.

Screen reader users who navigate by landmarks may miss the page header or encounter a confusing structure.

Why It Matters

Landmarks let assistive technology users jump to major areas fast. If the banner is nested, it may not be exposed as the page header, slowing orientation and navigation.

Users with low vision or blindness rely on a clean landmarks list to understand page structure. Poor hierarchy can also frustrate users with cognitive disabilities who depend on predictable layout.

Common Causes

Placing the site header inside <main> or an element with role="main".
Wrapping the header in a navigation landmark (e.g., <nav> or role="navigation").
Assigning role="banner" to a header that is inside article/section/aside/region/complementary.
Using a theme/container with a landmark role that encloses the page header.
Single-page app shells that render the header within a landmark region.
Multiple elements given role="banner" in one top-level document.

How to Fix

Make the page-level header a top-level sibling of other major landmarks. It should not be inside main, nav, aside, or any ARIA landmark.
Prefer the native <header> element at the page level. It maps to the banner landmark when it is not inside sectioning content (article, section, aside, nav).
Do not add role="banner" to headers that belong to a section or article. Those are section headers, not the page banner.
Ensure only one banner landmark per top-level document. Each iframe/document may have its own banner.
If a wrapper element currently has a landmark role and contains the header, either move the header out or remove the landmark role from that wrapper.
Order the layout: header (banner), then navigation (if separate), then main, then complementary/regions, then footer (contentinfo).

How to Test

Keyboard check:
Tab to the top of the page. Confirm the header and any skip links are before main content and not visually or structurally inside main.
Screen reader check:
NVDA: Press NVDA+F7, open Landmarks. You should see a single Banner at the top level, not nested under Main or Navigation.
JAWS: Insert+Ctrl+Semicolon to list Landmarks. Verify one Banner appears and is separate from Main.
VoiceOver (macOS/iOS): Use the Rotor (VO+U on macOS) and choose Landmarks. Confirm Banner is present and top-level.
DevTools/automation:
In browser accessibility tools, select the header. Check the computed role is banner and that its parent is not another landmark.
Run an automated audit (e.g., axe). Flagged issues around banner placement must be reviewed and fixed manually.

Good Example

HTML

!doctype html>
<html lang="en">
  <body>
    <header>
      <a class="skip-link" href="#content">Skip to main content</a>
      <h1>Example Site</h1>
    </header>

    <nav aria-label="Primary">
      <ul>
        <li><a href="/news">News</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>

    <main id="content">
      <h2>Welcome</h2>
      <p>Page content goes here.</p>
    </main>

    <footer>
      <p>© 2026 Example Co.</p>
    </footer>
  </body>
</html>

Bad Example

HTML

!doctype html>
<html lang="en">
  <body>
    <main role="main">
      <header role="banner">
        <h1>Example Site</h1>
      </header>
      <p>Content starts immediately.</p>
    </main>

    <nav>
      <!-- Navigation rendered after main -->
    </nav>
  </body>
</html>

Quick Checklist

Exactly one page-level banner per top-level document.
The banner is not a descendant of main, nav, aside, complementary, or any region.
Use a top-level <header> for the page banner; avoid role="banner" on section/article headers.
Place the banner before main content and as a sibling of other landmarks.
Avoid landmark roles on wrappers that contain the header.
Confirm with a screen reader that Banner appears once and is top-level.
Validate in DevTools that the header’s computed role is banner and parent is not a landmark.