Landmark banner is top level

Moderate effort

Found on 10% of audited stores.

Move your site's `<header>` element (or `role="banner"` landmark) so it is a direct child of `<body>`, not nested inside another landmark region.

What it is

Every webpage has a special "banner" landmark — the main site header that typically contains your logo, navigation, and tagline. Screen readers and assistive technologies use landmarks like banners to let users jump quickly around a page without reading everything. The rule is simple: the banner landmark must sit at the top level of the page (directly inside `<body>`), never wrapped inside another landmark region like `<main>`, `<aside>`, `<section>`, or `<article>`. When it is nested, assistive technology can't find it in the expected place, and some tools won't announce it as the banner at all.

Why it matters

Roughly 7 million Americans use a screen reader, and many more rely on keyboard or switch navigation. When your banner landmark is buried inside another landmark, those users lose the ability to skip directly to the header or understand the page structure — a core WCAG 2.1 requirement (Success Criterion 1.3.6 / 4.1.2). Failing WCAG landmarks is an accessibility legal risk: ADA and similar laws in the EU, UK, Canada, and Australia have led to lawsuits and settlements against e-commerce stores of all sizes. Fixing it also demonstrates technical quality to search engines that increasingly evaluate page structure as a signal of content organisation.

How to fix it

  1. Open your site's HTML source (View Source or your theme's template files) and find the element that acts as your page header — usually a `<header>` tag or an element with `role="banner"`.
  2. Check what element wraps it. If the `<header>` sits inside `<main>`, `<section>`, `<article>`, `<aside>`, `<nav>`, or another `<header>`, that is the problem.
  3. Move the entire `<header>` block so it is a direct child of `<body>`, appearing before `<main>` and after any skip-link anchors.
  4. If you cannot move the HTML element (e.g. a page-builder constraint), change the inner element to use `role="banner"` only on the outermost header that is already a `<body>` child, and remove `role="banner"` from any nested copy.
  5. Validate the fix: paste the page URL into the axe DevTools browser extension or WAVE tool and confirm no 'landmark-banner-is-top-level' error is reported.
  6. Re-test with a screen reader (NVDA + Firefox or VoiceOver + Safari): navigate by landmarks (Insert+F6 in NVDA) and confirm 'banner' is listed at the top level.

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark banner is top level on Shopify
  1. Go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
  2. Open layout/theme.liquid — this is the root HTML shell for every page.
  3. Locate the `<header>` element (or search for 'role="banner"'). It should appear as a direct child of `<body>`, before `{% section 'main' %}` or `{{ content_for_layout }}`.
  4. If the `<header>` is inside a `<main>` or any wrapping `<div role="main">`, cut the entire header block and paste it above the opening `<main>` tag.
  5. Click Save, then preview the store and verify with the axe browser extension.
Full Shopify guide →Official Shopify docs ↗
How to fix landmark banner is top level on Shopify Plus
  1. Same as Shopify: Online Store → Themes → Edit code → layout/theme.liquid.
  2. If your Plus store uses a custom checkout, also check checkout.liquid and ensure the checkout header is not nested inside a landmark.
  3. Save and verify with axe DevTools.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix landmark banner is top level on WooCommerce
  1. In your WordPress dashboard, go to Appearance → Theme File Editor (or use a local editor / SFTP).
  2. Open header.php in your active theme (or child theme).
  3. Check that the `<header>` tag (or `<div role="banner">`) is the very first semantic block after the `<body>` tag — it must NOT be inside a `<main>`, `<div role="main">`, or any other landmark wrapper.
  4. If it is nested, cut the `<header>...</header>` block and paste it directly inside `<body>` in the correct position (before `<main>`).
  5. Save, flush any caching plugin (e.g. WP Rocket: Dashboard → WP Rocket → Clear Cache), and retest.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix landmark banner is top level on WordPress.org
  1. Go to Appearance → Theme File Editor → header.php in your child theme.
  2. Ensure `<header id="masthead" role="banner">` (or equivalent) opens directly after `<body <?php body_class(); ?>>` and is closed before `<main`.
  3. If the theme uses a wrapping `<div>` landmark that contains the header, either unwrap that div or remove its landmark role.
  4. Save and test with axe DevTools or WAVE.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix landmark banner is top level on BigCommerce
  1. Go to Storefront → My Themes → click Customize on your active theme → select Edit Theme Files (Advanced).
  2. Open templates/layout/base.html (Stencil theme).
  3. Find the `<header>` element and confirm it is a direct child of `<body>`. It must appear before `<main id="main-content">`.
  4. If it is nested inside another landmark, cut and paste it to the correct position.
  5. Save and push the theme, then verify with axe DevTools.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix landmark banner is top level on Wix
  1. Wix generates its own HTML structure and places the site header in a top-level container automatically — you cannot directly edit the HTML.
  2. Open the Wix Editor and check that your Header section is set as the page-level Header (not placed inside a section or a box that has been assigned a landmark role via the Accessibility Wizard).
  3. Open Settings → Accessibility Wizard and step through it to ensure the header role is not duplicated or nested.
  4. If you use Wix Blocks or custom elements that add a `<header>` tag inside content, edit those components to use a neutral `<div>` instead.
  5. Use the axe DevTools extension on your published site to confirm the fix.
Full Wix guide →Official Wix docs ↗
How to fix landmark banner is top level on Wix Studio
  1. In Wix Studio, open the Editor and select your Header section.
  2. In the panel on the right, verify the semantic tag is set to 'Header' (not duplicated inside a Section or Article element).
  3. Ensure no parent container of the header has a conflicting ARIA landmark role applied via the Element Settings panel.
  4. Publish and test the live site with axe DevTools.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix landmark banner is top level on Squarespace
  1. Squarespace controls page structure. Go to Pages → Website Tools → Custom CSS and Custom Code (Business plan or higher required for header injection).
  2. If you have injected custom HTML into the header via Settings → Advanced → Code Injection, review that injected code and remove any wrapping landmark elements (e.g., `<main>`, `<section>`) around the `<header>` content.
  3. Squarespace's native `<header>` is already top-level; the issue most commonly arises from custom code injection — audit and remove any wrapping landmarks there.
  4. Test the published site with axe DevTools.
Full Squarespace guide →Official Squarespace docs ↗
How to fix landmark banner is top level on Webflow
  1. Open your project in the Webflow Designer.
  2. In the Navigator panel, locate the element tagged as 'Header' (Webflow uses a dedicated Header element that outputs `<header>`).
  3. Drag the Header element to be a direct child of the Body node in the Navigator — it must not sit inside a Section, Div Block, or any other element that carries a landmark role.
  4. If any wrapping Div Block has an ARIA Role set (via Element Settings → ARIA), remove that role or change it to 'none'.
  5. Publish and verify with axe DevTools.
Full Webflow guide →Official Webflow docs ↗
How to fix landmark banner is top level on Adobe Commerce (Magento)
  1. Identify your active theme under Content → Design → Configuration.
  2. Via SFTP or your IDE, open app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml (or the equivalent layout XML).
  3. Search for the `<header>` element. In the default Luma theme it already appears as a direct `<body>` child; in custom themes it may be wrapped.
  4. If wrapped, move the `<header>` block outside the wrapping landmark element.
  5. Run bin/magento cache:clean, then test with axe DevTools.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix landmark banner is top level on Magento Open Source
  1. Same file path as Adobe Commerce: app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml.
  2. Ensure `<header class="page-header">` is a direct child of `<body>`, not wrapped in `<main>` or any ARIA landmark div.
  3. Clear cache (bin/magento cache:flush) and verify.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix landmark banner is top level on Headless / Custom (I build in code)
  1. Open your root layout component or HTML shell (e.g., _app.jsx, layout.tsx, _document.jsx, or base.html).
  2. Ensure your `<header>` (or component that renders as `<header>`) is placed as a sibling of `<main>` at the top level of `<body>`, not nested inside `<main>` or any other element with a landmark role.
  3. Remove `role="banner"` from any nested header copies; only the outermost, body-level header should carry this role (it is implicit on `<header>` when used outside `<article>`/`<section>`).
  4. Run automated checks with axe-core in CI (axe-playwright, jest-axe) to prevent regression.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix landmark banner is top level on PrestaShop
  1. In your PrestaShop back office, go to Design → Theme & Logo → click 'Edit theme' or access files via FTP under `themes/<your-theme>/templates/`.
  2. Open `layouts/layout-full-width.tpl` or `layouts/layout-left-column.tpl` (whichever your theme uses) — this is the master page template.
  3. Locate the `{block name='header'}` or the `<header>` element and confirm it is rendered as a direct child of `<body>`, not inside a `{block name='main'}` or any element with a landmark role.
  4. If the header is nested inside a landmark, restructure the template blocks so the header comes before and outside the main content landmark.
  5. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and verify with axe DevTools.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix landmark banner is top level on BigCommerce for WP
  1. This plugin embeds a BigCommerce storefront within a WordPress theme. The landmark structure depends on both the WordPress theme's `header.php` and the BigCommerce channel template.
  2. Follow the WooCommerce/WordPress steps above to ensure your WordPress theme's `header.php` outputs `<header>` as a direct child of `<body>`.
  3. Additionally, check that BigCommerce channel pages (product listing, product detail) loaded within WordPress are not wrapping the site header inside a `<main>` or other landmark injected by the plugin.
  4. Test with axe DevTools and report persistent issues to BigCommerce support if the nesting originates from the plugin's own wrapper markup.
Full BigCommerce for WP guide →Official BigCommerce for WP docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find landmark banner is top level — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Landmark banner is top level?

Every webpage has a special "banner" landmark — the main site header that typically contains your logo, navigation, and tagline. Screen readers and assistive technologies use landmarks like banners to let users jump quickly around a page without reading everything. The rule is simple: the banner landmark must sit at the top level of the page (directly inside `<body>`), never wrapped inside another landmark region like `<main>`, `<aside>`, `<section>`, or `<article>`. When it is nested, assistive technology can't find it in the expected place, and some tools won't announce it as the banner at all.

Why does landmark banner is top level matter?

Roughly 7 million Americans use a screen reader, and many more rely on keyboard or switch navigation. When your banner landmark is buried inside another landmark, those users lose the ability to skip directly to the header or understand the page structure — a core WCAG 2.1 requirement (Success Criterion 1.3.6 / 4.1.2). Failing WCAG landmarks is an accessibility legal risk: ADA and similar laws in the EU, UK, Canada, and Australia have led to lawsuits and settlements against e-commerce stores of all sizes. Fixing it also demonstrates technical quality to search engines that increasingly evaluate page structure as a signal of content organisation.

How do I fix landmark banner is top level?

Move your site's `<header>` element (or `role="banner"` landmark) so it is a direct child of `<body>`, not nested inside another landmark region.

Authoritative references

Related Accessibility (WCAG) issues