Single banner landmark per page only

Pages must not contain more than one banner landmark

A page must have exactly one banner landmark. Use it for the site-wide header and remove additional banner roles.

This appears when multiple headers or UI fragments each use role="banner". It primarily affects screen reader users who rely on landmark navigation.

Why It Matters

Landmarks let assistive technology jump between major areas quickly. If a page exposes multiple banners, users cycle through redundant headers before reaching content.

Users with blindness or low vision depend on a clear set of landmarks. Extra banners add noise and slow navigation. Clean landmarks also support efficient bypass of repeated blocks.

Common Causes

• Applying role="banner" to more than one header element.
• Adding role="banner" to both a top bar and a secondary marketing or section header.
• Component libraries that ship their own header with role="banner" and are used multiple times.
• Micro-frontend or SPA layouts that mount multiple app shells with banner roles.
• Copy/paste of markup into modals or panels that reintroduces a banner role.

How to Fix

1. Keep one banner role only:
   • Choose a single, top-level site header wrapper to carry role="banner".
   • Remove role="banner" from all other elements.
2. Use header elements safely:
   • You may use multiple <header> elements, but do not give them role="banner" unless it’s the single, site-level header.
   • For section-specific headers, use plain <header> or a heading (h1–h6). If needed, use role="region" with a clear aria-label, not role="banner".
3. Structure your layout:
   • Typical order: <header role="banner"> … </header>, <main id="main" role="main"> … </main>, and one or more <nav> with aria-labels.
4. SPAs and routed views:
   • The banner persists across route changes. Do not mount additional banners when views swap.
5. Embedded content:
   • Iframes are separate documents and may contain their own single banner. Inside the host document, keep only one banner.

Recommendation: Provide a visible skip link to the main content in addition to proper landmarks to satisfy bypass expectations.

How to Test

• Code/DOM check:
• Search for role="banner". Confirm there is exactly one instance per document.
• Screen reader check (desktop):
• NVDA: Press NVDA+F7, open Landmarks list. Ensure “Banner” appears once.
• JAWS: Open the Regions list (Insert+Ctrl+R) or cycle landmarks. Verify a single Banner.
• VoiceOver (macOS): Open the Web Rotor (Ctrl+Option+U), Landmarks. Confirm one Banner.
• Mobile screen reader:
• iOS VoiceOver: Rotor > Landmarks. Ensure one Banner.
• Android TalkBack: Local context menu > Landmarks (if available). Confirm one Banner.
• Keyboard sanity:
• Use your skip link to jump to main content. Landmark navigation should not trap you in multiple banners.

Good Example

<header role="banner">
  <a class="brand" href="/">Acme Co.</a>
  <nav aria-label="Primary navigation">
    <ul>
      <li><a href="/products">Products</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/support">Support</a></li>
    </ul>
  </nav>
</header>
<main id="main" role="main">
  <h1>Welcome</h1>
  <section>
    <header>
      <h2>Latest Updates</h2>
    </header>
    <p>News content…</p>
  </section>
</main>

Bad Example

<header role="banner">
  <div class="topbar">Free shipping this week!</div>
</header>
<header role="banner">
  <a href="/" class="logo">Acme Co.</a>
</header>
<main role="main">
  <h1>Catalog</h1>
</main>

Quick Checklist

• Exactly one element has role="banner" in the document.
• The banner wraps the global site header (logo, primary nav, etc.).
• No dialogs, modals, or secondary sections use role="banner".
• Additional headers use plain <header> or role="region" with labels, not banner.
• Landmark order is clear: banner, main, navigation, complementary, contentinfo as needed.
• SPA routes do not add extra banners when views change.
• Iframes manage their own landmarks separately from the host page.