How to fix landmark banner is top level on Adobe Commerce (Magento)
Ensure your site's banner landmark (<header> or role="banner") sits at the top level of the page, not nested inside another landmark region.
Steps for 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.
<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>
-->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.
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.
See the complete Landmark banner is top level guide for every platform and the full background.
Not sure if your Adobe Commerce (Magento) store has this?
Run a free SEOLZ audit — we’ll find landmark banner is top level and every other issue across your whole site.
Scan my site free