How to fix landmark no duplicate banner on Wix

Steps for Wix

1. Wix generates its HTML automatically; you cannot directly edit the HTML element tags for built-in header sections.
2. In the Wix Editor, ensure you have only ONE 'Header' section (the very first section at the top of the page marked as 'Header' in the Layers panel).
3. If you have added an additional section at the top of the page (e.g. an announcement bar or sticky strip) that Wix is rendering as a second <header>, convert it: click the strip → Settings → change its section type to a regular section rather than a Header.
4. Remove any duplicate Header sections via the Pages & Menu panel or Layers panel.
5. For Wix Studio: open the Layers panel, identify any element with a 'Header' role, and ensure there is only one. Change any secondary ones to a regular section.
6. Use the WAVE browser extension to verify only one banner landmark remains after publishing.

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