Landmark no duplicate banner
Moderate effortFound on 12% of audited stores.
Ensure your page has only one banner landmark (one `<header>` or `role="banner"` element that is not nested inside another landmark), so screen reader users can navigate your site reliably.
What it is
A "banner landmark" is the main header area of a webpage — the section that typically contains your logo, site-wide navigation, and branding. In HTML it is created by a top-level `<header>` element or any element with `role="banner"`. Assistive technologies like screen readers use landmarks as shortcuts so users can jump straight to the part of the page they need. The WCAG rule is simple: a page should have only one banner landmark. When two or more exist (e.g. a sticky header plus a secondary `<header>` in the page body, or a theme component that accidentally duplicates the tag), screen readers announce "banner" more than once and users cannot reliably find the true top of your site.
Why it matters
Blind and low-vision shoppers who rely on screen readers navigate pages by jumping between landmarks. If there are two banners, their software cannot tell them which is the real site header, forcing them to listen to redundant announcements or give up entirely. This directly hurts conversions from assistive technology users — a segment estimated at 15–20 % of the global population with some form of disability. Legally, WCAG 2.1 AA compliance is required or strongly expected under the ADA (US), EAA (EU), AODA (Canada), and similar laws; duplicate-landmark violations are cited in accessibility lawsuits and audits. Fixing it also tends to tighten your HTML structure, which search engines reward with slightly better crawlability.
How to fix it
- Audit your page source: open browser DevTools, search the HTML for every occurrence of `<header`, `role="banner"`, and any theme/widget that outputs a header block. List them all.
- Identify which element is the true site-wide banner — typically the outermost `<header>` containing your logo and main navigation that wraps the whole page, not a section within an article or sidebar.
- Convert any secondary `<header>` elements that sit inside a `<main>`, `<article>`, `<section>`, `<aside>`, or `<nav>` to use a non-landmark tag (e.g. `<div>`) or, if the element genuinely introduces a content section, wrap it inside one of those sectioning elements so the browser treats it as a section header rather than a page-level banner.
- Remove or consolidate any explicit `role="banner"` attributes on elements that should not be the page banner, leaving `role="banner"` on at most one element (or rely on a single top-level `<header>`).
- Verify the fix: re-run your accessibility scanner, or use a browser extension such as axe DevTools, to confirm only one banner landmark is reported.
- Test with a screen reader (NVDA + Firefox, VoiceOver + Safari, or JAWS + Chrome) by triggering the landmark navigation shortcut to confirm a single 'banner' is announced.
Fix it on your platform
Pick your platform for the exact steps.
How to fix landmark no duplicate banner on Shopify
- Go to Online Store → Themes → click 'Customize' on your active theme.
- To edit HTML directly: click 'Edit code' (theme.liquid and section files).
- Open 'layout/theme.liquid' — look for the top-level `<header>` tag; this should be the only banner-level header.
- Search all files (use the search bar in code editor) for additional `<header` tags or `role="banner"`. Common culprits: announcement bar sections, sticky-header sections, or app-injected blocks.
- For any secondary `<header>` inside a content section (e.g. inside a `.page-content` div), change the tag to `<div>` and add an appropriate class for styling.
- Save changes and re-test with an accessibility browser extension.
How to fix landmark no duplicate banner on WooCommerce
- The header markup lives in your active WordPress theme. In wp-admin go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- Open 'header.php' — confirm it contains exactly one top-level `<header>` or `role="banner"` element.
- Search all theme template files (header.php, page.php, single.php, functions.php, and any template-parts/) for additional `<header` or `role="banner"` strings.
- If a plugin (e.g. Elementor, WPBakery, a sticky-header plugin) is injecting a second banner, check its settings for a 'header tag' or 'HTML tag' option and change it to `<div>`.
- Use a child theme to override only the affected template file so your changes survive theme updates.
- Clear caching plugins (e.g. WP Rocket, W3 Total Cache), then re-scan.
How to fix landmark no duplicate banner on BigCommerce
- Go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme (Stencil).
- Open 'templates/layout/base.html' (or 'templates/layout/default.html') — locate the top-level `<header>` element.
- Search all template files under 'templates/' for any additional `<header` or `role="banner"` occurrences.
- Secondary headers inside product or category content regions should use `<div>` instead of `<header>`.
- If a Widget or Page Builder block is adding a header element, edit the block's HTML in Page Builder (Storefront → Page Builder) and change the tag.
- Save and publish, then re-run your accessibility scan.
How to fix landmark no duplicate banner on Wix
- In the Wix Editor, the site header is the strip at the very top that appears on every page (labeled 'Header' in the layers panel).
- Open the Editor → click on any element in the header area → check the Layers panel to confirm only one strip is set as the page Header.
- If you have added a second sticky strip or an announcement bar and set its ARIA role to 'banner', select that strip → go to its Settings/Accessibility panel → change the Landmark Role to 'none' or remove it.
- In Wix Studio, open the Pages & Layers panel, expand the Header section, and ensure no other section outside the designated header has role='banner' assigned via the Accessibility settings.
- Publish and test with the axe browser extension.
How to fix landmark no duplicate banner on Wix Studio
- Open your site in Wix Studio Editor.
- In the Layers panel (left sidebar), expand the page structure and identify the official 'Header' section at the top.
- Select each other section/container → open its Settings panel → check the 'Accessibility' or 'ARIA role' field. If any non-header section has role='banner', clear that field.
- Ensure announcement bars or promotional strips use role='region' with an aria-label, or no landmark role at all.
- Publish and validate with the axe DevTools browser extension.
How to fix landmark no duplicate banner on Squarespace
- Squarespace generates the `<header>` element automatically from the site Header section. You cannot change its HTML tag directly in the GUI.
- Go to Pages → open any page → click the pencil icon on the Header block to ensure only one header exists site-wide.
- If a Section block inside a page uses a `<header>` tag (rare in default templates), go to Website → Pages → select the page → edit the section's Custom CSS or inject code via Settings → Advanced → Code Injection.
- Use Settings → Advanced → Code Injection (Footer) to add a JavaScript snippet that renames rogue `<header>` elements to `<div>` at runtime — or contact a Squarespace developer to override via custom code.
- Note: deeply modifying semantic HTML in Squarespace may require a Developer Mode (Squarespace 7.0) or custom code injection approach.
How to fix landmark no duplicate banner on Webflow
- Open your project in the Webflow Designer.
- In the Navigator panel, scan every page and the Global Navbar symbol for elements tagged as 'Header' (which outputs `<header>`).
- Select any element that is currently a 'Header' tag but should not be the page banner → in the right-hand Element Settings panel, change the Tag from 'Header' to 'Div Block'.
- Check all Symbols (Components) — a reusable symbol with a `<header>` tag included inside a content section will create a duplicate. Change its tag to 'Div Block' in the Symbol's edit view.
- Also check CMS Collection page templates and landing page templates for rogue `<header>` tags.
- Publish and verify with the axe DevTools extension.
How to fix landmark no duplicate banner on Adobe Commerce (Magento)
- The header markup is in 'app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/html/header.phtml' (or the equivalent in your custom theme).
- SSH into your server or use your IDE to search all theme template (.phtml) files for `<header` and `role="banner"`.
- Confirm only 'html/header.phtml' outputs the top-level `<header role="banner">` element.
- Any widget, CMS block, or third-party module that outputs a second `<header>` should be edited: find its template file via bin/magento dev:template-hints:enable, then change `<header>` to `<div>` in that template.
- Run 'bin/magento cache:flush' and 'bin/magento setup:static-content:deploy' after changes.
- Re-scan with an accessibility tool to confirm a single banner landmark.
How to fix landmark no duplicate banner on Headless / Custom (I build in code)
- Search your codebase (components, layouts, partials) for every `<header`, `role="banner"`, and any component named 'Header' or 'PageHeader'.
- Ensure exactly one component renders a top-level `<header>` (or `role="banner"`) that is not nested inside `<main>`, `<article>`, `<section>`, `<aside>`, or `<nav>`.
- Rename inner-content headings sections to `<div>` with descriptive class names, or wrap them in a sectioning element so the browser treats the nested `<header>` as a section header, not a page banner.
- Add an automated accessibility test (e.g. jest-axe or Playwright + axe-core) to your CI pipeline to catch regressions.
- Deploy and validate with axe DevTools or Lighthouse.
How to fix landmark no duplicate banner on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — template paths and CLI commands are identical for Magento Open Source.
- If using a third-party theme from Marketplace, create a theme override in app/design/frontend/<YourVendor>/<YourTheme>/ rather than editing the vendor files directly, then apply the same <header>-to-<div> change in your override template.
How to fix landmark no duplicate banner on PrestaShop
- Via FTP or your hosting file manager, go to themes/<your-theme>/templates/layouts/ and open layout-full-width.tpl (or whichever layout your store uses).
- Search for '<header' and 'role="banner"'. Ensure only one top-level <header> exists for the site header.
- Change any duplicate <header> elements (in module template files under modules/<module-name>/views/templates/) to <div> and remove role="banner".
- Clear PrestaShop's cache: Back Office → Advanced Parameters → Performance → Clear cache.
- Verify with axe DevTools.
How to fix landmark no duplicate banner on OpenCart
- In the OpenCart admin, go to Design → Theme Editor, or access the files directly via FTP at catalog/view/theme/<your-theme>/template/common/header.tpl (or header.twig for OpenCart 3+).
- Open header.twig/header.tpl and search for '<header' and 'role="banner"'. There should be only one.
- Identify any module or extension that is injecting a second <header> (check catalog/view/theme/<theme>/template/ for module templates).
- Change duplicate <header> elements to <div> and remove role="banner" from any that are not the primary site header.
- Refresh the OpenCart cache under Admin → Dashboard → (gear icon) → Refresh, then verify with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find landmark no duplicate banner — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Landmark no duplicate banner?
A "banner landmark" is the main header area of a webpage — the section that typically contains your logo, site-wide navigation, and branding. In HTML it is created by a top-level `<header>` element or any element with `role="banner"`. Assistive technologies like screen readers use landmarks as shortcuts so users can jump straight to the part of the page they need. The WCAG rule is simple: a page should have only one banner landmark. When two or more exist (e.g. a sticky header plus a secondary `<header>` in the page body, or a theme component that accidentally duplicates the tag), screen readers announce "banner" more than once and users cannot reliably find the true top of your site.
Why does landmark no duplicate banner matter?
Blind and low-vision shoppers who rely on screen readers navigate pages by jumping between landmarks. If there are two banners, their software cannot tell them which is the real site header, forcing them to listen to redundant announcements or give up entirely. This directly hurts conversions from assistive technology users — a segment estimated at 15–20 % of the global population with some form of disability. Legally, WCAG 2.1 AA compliance is required or strongly expected under the ADA (US), EAA (EU), AODA (Canada), and similar laws; duplicate-landmark violations are cited in accessibility lawsuits and audits. Fixing it also tends to tighten your HTML structure, which search engines reward with slightly better crawlability.
How do I fix landmark no duplicate banner?
Ensure your page has only one banner landmark (one `<header>` or `role="banner"` element that is not nested inside another landmark), so screen reader users can navigate your site reliably.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN