Landmark banner is top level
Moderate effortFound on 4% of audited stores.
Ensure your site's banner landmark (<header> or role="banner") sits at the top level of the page, not nested inside another landmark region.
What it is
Every webpage has structural "landmarks" — named regions that screen readers and assistive technologies use to let users jump around the page quickly, similar to chapters in a book. The "banner" landmark is the one that identifies your site-wide header (logo, navigation, etc.). It must live directly inside the `<body>` of your HTML page, not wrapped inside another landmark like `<main>`, `<section>`, `<article>`, or `<aside>`. When it is accidentally nested inside another landmark, it breaks the expected page structure that screen readers rely on.
Why it matters
Screen reader users — including many people with visual impairments — rely on landmarks to navigate pages efficiently. When the banner landmark is nested incorrectly, assistive technologies may not recognize it as the site-wide header, making it impossible for those users to quickly find the top of your page or skip to main content. This is a WCAG 2.1 failure (Success Criterion 1.3.1 and 4.1.2), meaning it creates real legal accessibility risk in regions with accessibility laws (ADA, EN 301 549, UK Equality Act). Beyond compliance, fixing it improves the experience for the growing segment of shoppers using assistive technology — directly protecting your store from exclusion complaints and broadening your customer reach.
How to fix it
- Identify the element acting as your banner landmark — this is typically a `<header>` element or any element with `role="banner"` in your theme's HTML.
- Inspect the surrounding HTML structure (use browser DevTools > Elements panel, or 'View Page Source') to confirm whether that `<header>` or `role="banner"` element is a direct child of `<body>`, or whether it is wrapped inside another landmark element such as `<main>`, `<section role="main">`, `<aside>`, `<article>`, or `<nav>`.
- If the banner is nested inside another landmark, move it so it becomes a direct child of `<body>`. The correct order is: `<body>` → `<header>` (banner) → `<main>` → `<footer>` at the same level, not nested.
- Check that no element with `role="banner"` also exists somewhere deeper in the page. There should be only one banner landmark per page, and it must be at the top level.
- If your theme uses a wrapper `<div>` that itself has a landmark role (e.g., `role="main"` or `role="application"`) wrapping the entire page including the header, remove the landmark role from that wrapper div, or restructure so the `<header>` is outside it.
- Re-test using a free tool such as the axe browser extension or WAVE to confirm the banner landmark now appears at the top level with no nesting warnings.
<header role="banner">
<!-- Site logo, main navigation, etc. -->
</header>
<main id="main-content">
<!-- Page content -->
</main>
<footer>
<!-- Footer content -->
</footer>
<!-- ✅ All three are direct children of <body> — correct structure -->
<!-- ❌ WRONG — banner nested inside <main>: -->
<!--
<main>
<header role="banner">...</header>
...
</main>
-->Fix it on your platform
Pick your platform for the exact steps.
How to fix landmark banner is top level on Shopify
- In your Shopify admin, go to Online Store → Themes → click the '...' (Actions) menu next to your active theme → Edit code.
- Open the file `layout/theme.liquid` — this is the master page wrapper that controls the HTML structure for every page.
- Search for your `<header>` tag (or any element with `role="banner"`). Confirm it appears as a direct child of `<body>`, not wrapped inside a `<main>`, `<section>`, `<div role="main">`, or similar landmark.
- If the `<header>` is inside a landmark wrapper, cut and paste it to be directly under the opening `<body>` tag, outside any landmark-carrying elements.
- Save the file, then preview the theme and re-run axe DevTools or WAVE on a live page to verify the banner is now top-level.
How to fix landmark banner is top level on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP to avoid losing changes on theme update).
- Open `header.php` in your active (child) theme. This file contains the `<header>` element that renders the banner landmark.
- Check that the `<header>` (or element with `role="banner"`) is opened in `header.php` and closed before any `<main>` element opens in `index.php` / `page.php` / `single.php`.
- If a plugin or page builder is wrapping the entire page layout (e.g., a `<section>` or `<div role="main">` that starts above the `<header>`), edit or disable that wrapper in the relevant template or plugin settings.
- Save changes and verify with axe DevTools or WAVE that the banner landmark is now a top-level region.
How to fix landmark banner is top level on BigCommerce
- In your BigCommerce control panel, go to Storefront → My Themes → click Customize on your active theme, then open the Theme Editor; for code edits go to Storefront → My Themes → Advanced → Edit Theme Files.
- Open `templates/layout/base.html` (Cornerstone-based themes) — this is the master template that wraps all pages.
- Locate the `<header>` element (usually contains `id="header"` or similar). Confirm it is a direct child of `<body>`, not wrapped inside a `<main>` or other landmark element.
- If it is nested inside a landmark, move it to be a sibling of `<main>` at the top level under `<body>`.
- Save, push changes, and test with axe DevTools or the WAVE browser extension on a storefront page.
How to fix landmark banner is top level on Wix
- Wix generates its own HTML structure automatically, so you cannot directly edit the raw HTML landmark nesting. Instead, open your site in the Wix Editor and ensure your Header section is set as the dedicated 'Header' strip — do not place header content inside a regular Section or Box that itself has a semantic role.
- In the Wix Editor, click on the top area of your page. In the left panel make sure it is labeled 'Header' (not a regular Section). If header content has been accidentally dragged into a body Section, move it back into the Header strip using the Layers panel (View → Layers).
- For Wix Studio: open the Pages & Layers panel, confirm your header component is under 'Header' at the top of the page hierarchy, not nested under a content section.
- After adjusting, re-publish the site and test with the axe DevTools browser extension to check if the banner landmark issue is resolved. Note: if Wix's own rendering still produces the nesting issue, submit a report via Wix Support as this requires a platform-level fix.
How to fix landmark banner is top level on Wix Studio
- Open your project in Wix Studio. In the left-hand Pages & Layers panel, locate your Header block at the top of the page structure.
- Ensure the Header block is at the root level of the page hierarchy — it should not be placed inside a Section, Container, or any other block that carries a landmark role.
- If header elements are nested inside a Section, select them in the Layers panel and drag them up to the Header block level.
- Re-publish and verify with the axe DevTools browser extension.
How to fix landmark banner is top level on Squarespace
- Squarespace controls page structure through its core templates. Go to Website → Pages → click the gear icon on your page → Advanced → and check any Custom CSS or Code Injection that may be adding landmark roles.
- Go to Settings → Advanced → Code Injection and check the Header code block — ensure no wrapping element with a landmark role (e.g., `<main>`, `<section>`) is being injected around your header content.
- In the Squarespace Style Editor (Design → Site Styles or Design → Custom CSS), look for any CSS that uses `role` attributes in selectors, which might hint at injected ARIA roles.
- If you have Developer Mode enabled (legacy Squarespace 7.0), open `base.region` or your template's layout files via the Template Editor and confirm the `<header>` block is a direct child of `<body>`.
- Re-test with axe DevTools or WAVE after saving changes.
How to fix landmark banner is top level on Webflow
- Open your project in the Webflow Designer. In the Navigator panel (left sidebar), locate the Navbar or Header element at the top of your page structure.
- Ensure the Navbar/Header element is a direct child of the Body node in the Navigator — it should not be nested inside a Section, Div Block, or any element that has a landmark role assigned.
- If it is nested, drag it in the Navigator panel to be directly under Body, above all other landmark-carrying elements.
- To check/change ARIA roles: select the element, open the Element Settings panel (D key), scroll to Custom Attributes, and ensure no conflicting `role` attribute is set on a wrapper around your header.
- Publish the site and verify with the axe DevTools browser extension.
How to fix landmark banner is top level on Adobe Commerce (Magento)
- The banner/header landmark is defined in your active theme's layout XML and template (PHTML) files. Navigate to `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/html/` in your theme directory.
- Open `header.phtml`. Confirm the `<header>` element is rendered at the top of the page structure — check the root template `root.phtml` (or `1column.phtml` / `2columns-left.phtml` etc.) to see the full page wrapper.
- In the root template, ensure `<?= $block->getChildHtml('header') ?>` is called as a direct child of `<body>` (or a non-landmark wrapper `<div>`), not inside a `<main>`, `<section>`, `<article>`, or `<aside>`.
- If a custom layout XML is wrapping the header inside a landmark container, edit `Magento_Theme/layout/default.xml` in your theme to restructure the container order.
- Run `bin/magento cache:flush` after making changes, then test with axe DevTools on the storefront.
How to fix landmark banner is top level on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the theme file locations and layout XML approach are identical for Magento Open Source.
- Key files: `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml` and `header.phtml`.
- Ensure the `<header>` element in `header.phtml` is positioned as a direct child of `<body>` in the rendered HTML, not wrapped inside a landmark-carrying element.
- Flush cache with `bin/magento cache:flush` and verify with axe DevTools.
How to fix landmark banner is top level on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → click 'Edit theme' or access files via FTP under `themes/<your-theme>/templates/`.
- Open `layouts/layout-full-width.tpl` or `layouts/layout-left-column.tpl` (whichever your theme uses) — this is the master page template.
- 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.
- If the header is nested inside a landmark, restructure the template blocks so the header comes before and outside the main content landmark.
- Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and verify with axe DevTools.
How to fix landmark banner is top level on BigCommerce for WP
- 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.
- Follow the WooCommerce/WordPress steps above to ensure your WordPress theme's `header.php` outputs `<header>` as a direct child of `<body>`.
- 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.
- Test with axe DevTools and report persistent issues to BigCommerce support if the nesting originates from the plugin's own wrapper markup.
Does your site have this issue?
Run a free SEOLZ audit to find landmark banner is top level — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Landmark banner is top level?
Every webpage has structural "landmarks" — named regions that screen readers and assistive technologies use to let users jump around the page quickly, similar to chapters in a book. The "banner" landmark is the one that identifies your site-wide header (logo, navigation, etc.). It must live directly inside the `<body>` of your HTML page, not wrapped inside another landmark like `<main>`, `<section>`, `<article>`, or `<aside>`. When it is accidentally nested inside another landmark, it breaks the expected page structure that screen readers rely on.
Why does landmark banner is top level matter?
Screen reader users — including many people with visual impairments — rely on landmarks to navigate pages efficiently. When the banner landmark is nested incorrectly, assistive technologies may not recognize it as the site-wide header, making it impossible for those users to quickly find the top of your page or skip to main content. This is a WCAG 2.1 failure (Success Criterion 1.3.1 and 4.1.2), meaning it creates real legal accessibility risk in regions with accessibility laws (ADA, EN 301 549, UK Equality Act). Beyond compliance, fixing it improves the experience for the growing segment of shoppers using assistive technology — directly protecting your store from exclusion complaints and broadening your customer reach.
How do I fix landmark banner is top level?
Ensure your site's banner landmark (<header> or role="banner") sits at the top level of the page, not nested inside another landmark region.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN