How to fix landmark no duplicate banner on Wix Studio

Steps for Wix Studio

1. Open your project in Wix Studio and open the Layers panel (left sidebar).
2. Identify all elements marked as 'Header' — only ONE should exist site-wide.
3. Click any secondary 'Header' element → open its Settings/Properties panel → change its semantic role or element type to a regular 'Section' or 'Div'.
4. If the duplicate is coming from a custom-coded widget or Velo (JavaScript) component, edit the component's HTML in the Velo code panel: change any <header> tag to <div> and remove role="banner".
5. Publish the site and verify with the axe DevTools 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.