How to fix landmark no duplicate banner on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. SSH or FTP into your server and navigate to your active theme directory: app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/ (or the equivalent path in the default Luma/Blank theme at vendor/magento/theme-frontend-luma).
2. Open root.phtml (or html/head.phtml, default.phtml). Search for '<header' and 'role="banner"' across all layout XML and template .phtml files.
3. Ensure only the main site header block (typically wrapping the logo, search, and navigation) carries the <header role="banner"> or top-level <header> tag.
4. Any secondary <header> elements in widgets, CMS blocks, or product listing blocks should be changed to <div> or wrapped inside an <article> or <section>.
5. Run bin/magento cache:flush and bin/magento setup:static-content:deploy after saving changes.
6. Validate with the axe DevTools browser extension on the live or staging store.

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