How to fix landmark complementary is top level on Adobe Commerce (Magento)
Move any `<aside>` element (or element with `role="complementary"`) so it is a direct child of `<body>`, not nested inside another landmark region like `<main>`, `<header>`, `<footer>`, or `<nav>`.
Steps for Adobe Commerce (Magento)
- Identify the layout XML file responsible for the page type (e.g. `catalog_product_view.xml`, `cms_index_index.xml`) in your custom theme under `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/` or the relevant module's layout directory.
- Open the layout XML and find the block or container that renders the sidebar (commonly `catalog.leftnav` or a `sidebar.main` container). Check which container wraps it — if it is inside the `content` container (which maps to `<main>`), it is incorrectly nested.
- Move the sidebar container reference in the XML to be a sibling of `content` rather than a child, for example as a direct child of the `page.wrapper` or root container.
- In the corresponding PHTML template or `default.xml`, update the CSS grid/flex classes on the outer wrapper so the visual layout is preserved.
- Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy`, then re-test with axe DevTools.
<aside aria-label="Related products">
<!-- sidebar / complementary content here -->
</aside>
<main>
<!-- primary page content here -->
</main>
<!-- ✅ <aside> is a sibling of <main>, both direct children of <body> -->What is landmark complementary is top level?
HTML has special "landmark" regions — like `<main>`, `<nav>`, `<header>`, `<footer>`, and `<aside>` — that act as signposts for people using screen readers. The `<aside>` element (or anything marked with `role="complementary"`) is specifically the "complementary" landmark: it marks a section of supporting content that is related to, but separate from, the main content (think sidebars, related-product panels, or promo blocks). WCAG and accessibility best practice require that this complementary landmark sits at the top level of the page — a direct child of `<body>` — not buried inside another landmark like `<main>` or `<article>`. When it is nested inside another landmark, screen readers can get confused about the page structure.
Screen reader users — including many people with visual impairments — rely on landmark navigation to jump quickly around a page without reading every word. When the complementary landmark is incorrectly nested, assistive technology either misreports the page structure or skips the region entirely, making your sidebar or related-content block invisible to those users. This is a WCAG 2.1 best-practice violation (related to the ARIA landmark rules) that can expose your store to accessibility complaints and legal risk in jurisdictions with digital accessibility laws (ADA in the US, EN 301 549 in the EU, AODA in Canada). Fixing it also demonstrates good semantic HTML, which search engines use to better understand your page structure and content hierarchy — a subtle but real SEO signal.
See the complete Landmark complementary 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 complementary is top level and every other issue across your whole site.
Scan my site free