How to fix landmark no duplicate banner on BigCommerce

Steps for BigCommerce

1. Go to Storefront → My Themes → click 'Advanced' → Edit Theme Files (or download the theme to edit locally).
2. Open 'templates/layout/base.html' and any partial templates in 'templates/components/'. Search for '<header' and 'role="banner"'.
3. Keep only one top-level <header> (or role="banner"`) for the site header. Change all others to <div> or wrap them inside a sectioning element.
4. Check 'templates/components/header.html' specifically — this is the canonical site header file in most Stencil themes.
5. Any secondary headers added via Page Builder widgets should be inspected; use Page Builder → drag-and-drop editing to remove or reassign HTML wrapper tags where the widget allows it.
6. Publish changes and validate with the axe browser extension.

<!-- ✅ 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> -->

What is landmark no duplicate banner?

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.

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.

See the complete Landmark no duplicate banner guide for every platform and the full background.