Landmark no duplicate banner

What it is

A "banner landmark" is the special region at the top of a webpage that identifies the site header — the area containing your logo, main navigation, and site-wide branding. In HTML, it is created by a top-level `<header>` element or any element with `role="banner"`. Screen readers and other assistive technologies use landmarks like this to help users jump quickly to key sections of a page. The WCAG rule "landmark-no-duplicate-banner" means your page currently has more than one element claiming to be the site banner, which confuses assistive technology users who expect only one.

Why it matters

When a page has two or more banner landmarks, screen reader users who rely on landmark navigation get confused about which one is the real site header — or may find themselves trapped in a loop. This is a WCAG 2.1 failure (specifically related to Success Criterion 1.3.6 and landmark best practices) that exposes your store to accessibility-related legal risk, particularly in jurisdictions like the US (ADA), UK (Equality Act), and the EU (EAA). Beyond legal exposure, accessible sites perform better: screen reader users abandon inaccessible stores entirely, and Google uses accessibility signals as part of its overall page quality assessment. Fixing duplicate banners is a small code change with meaningful impact on both compliance and customer trust.

How to fix it

1. Audit your page's HTML: open browser DevTools (F12), go to the Elements tab, and search (Ctrl+F / Cmd+F) for '<header' and 'role="banner"' to find every occurrence on the page.
2. Identify which element is the true, site-wide page header (typically wrapping your logo, site name, and primary navigation). This one should keep the banner role — either as a top-level <header> or with role="banner".
3. For every other <header> element or role="banner" that is NOT the site-wide header (e.g. a card header, article header, section header, widget header, or a sticky bar added by an app), replace <header> with a semantically appropriate element such as <div>, <section>, or <article>, and remove any role="banner" attribute.
4. If a secondary <header> element is inside an <article>, <aside>, <main>, <nav>, or <section> element, it is automatically scoped to that parent and does NOT create a banner landmark — so wrapping it properly in one of those sectioning elements is another valid fix.
5. Re-test using a free tool such as the axe DevTools browser extension or the WAVE accessibility checker to confirm only one banner landmark is reported.
6. Test manually with a screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on Mac) by using the landmark navigation shortcut to verify you land on one banner and one only.

<!-- ✅ CORRECT: One top-level banner landmark -->
<header role="banner"> <!-- or just <header> at the top level -->
  <a href="/"><img src="logo.png" alt="Acme Store home"></a>
  <nav aria-label="Primary navigation">...</nav>
</header>

<main>
  <article>
    <!-- ✅ CORRECT: <header> inside <article> is NOT a banner landmark -->
    <header>
      <h2>Article Title</h2>
    </header>
    <p>Content...</p>
  </article>

  <!-- ✅ CORRECT: a card header using <div>, not <header> -->
  <div class="card-header">
    <h3>Featured Product</h3>
  </div>
</main>

<!-- ❌ WRONG: second top-level <header> outside any sectioning element -->
<!-- <header><h2>Promotions Bar</h2></header> -->

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN