Landmark complementary is top level

Moderate effort

Found on 2% of audited stores.

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>`.

What it is

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.

Why it matters

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.

How to fix it

Identify every `<aside>` element or element with `role="complementary"` on the page using your browser's DevTools (Inspect Element) or an accessibility tree viewer.
Check whether each one is a direct child of `<body>`, or whether it is nested inside another landmark element such as `<main>`, `<header>`, `<footer>`, `<nav>`, `<section>`, or `<article>`.
If a complementary landmark is nested inside another landmark, restructure your HTML so the `<aside>` (or `role="complementary"` element) is moved outside and sits as a sibling of `<main>`, not inside it. Adjust CSS layout (e.g. flexbox or grid on `<body>` or a wrapper `<div>`) so the visual appearance remains the same.
If the content genuinely belongs inside `<main>` as a secondary column (e.g. a product-detail sidebar), replace `<aside>` with a plain `<div>` or `<section>` (with an appropriate heading) so it no longer emits a complementary landmark role — only use `<aside>` / `role="complementary"` at the top level.
If multiple complementary landmarks exist on the same page, give each a unique accessible label using `aria-label` or `aria-labelledby` so screen reader users can distinguish them (e.g. `<aside aria-label="Related products">`).
Re-test with an automated tool (axe DevTools browser extension, Wave, or Lighthouse) and also navigate the page with a screen reader's landmark shortcut (e.g. 'D' in NVDA/JAWS, 'W' in VoiceOver) to confirm the aside is reachable and correctly announced.

<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> -->

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark complementary is top level on Shopify

In your Shopify admin, go to Online Store → Themes → Actions → Edit code.
Open the relevant layout or section file — typically `layout/theme.liquid` for global structure, or the specific section file (e.g. `sections/product-sidebar.liquid`) where the `<aside>` lives.
Locate the `<aside>` or `role="complementary"` element. If it is inside a `<main>` or `{% section 'content' %}` block, cut it out and place it as a sibling of `<main>` directly inside the `<body>` wrapper in `theme.liquid`.
Adjust your CSS (in `assets/base.css` or the relevant stylesheet) to maintain the visual layout — for example, use a CSS grid or flexbox on the `<body>` or outer wrapper `<div>` so the aside and main appear side-by-side.
Save changes, preview the theme, and re-run an axe or Lighthouse accessibility audit to confirm the violation is resolved.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark complementary is top level on WooCommerce

Your page template is controlled by your active WordPress theme. Go to Appearance → Theme File Editor (or edit via FTP/SSH) and open the relevant template file — commonly `page.php`, `single-product.php`, or `sidebar.php`.
Search for `<aside`, `get_sidebar()`, or `role="complementary"` within the template. Note which landmark element wraps it (e.g. `<main id="main">`).
If the sidebar is rendered inside `<main>`, restructure the template so `<main>` contains only the primary content and the `<aside>` / `get_sidebar()` call is a sibling outside `<main>`, both wrapped by a layout `<div class="site-content">`.
Update your theme's CSS (`style.css` or a child-theme stylesheet) to apply a flexbox or grid layout to the wrapper div so the sidebar still appears visually alongside the content.
If using a block theme (Full Site Editing), go to Appearance → Editor, select the template, find the Sidebar block, and use the block mover to place it outside the Main Content block at the root level of the template canvas.
Test with the axe DevTools browser extension and a screen reader landmark shortcut to verify the fix.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix landmark complementary is top level on BigCommerce

In your BigCommerce admin, go to Storefront → My Themes → Advanced → Edit Theme Files (Stencil CLI or in-browser editor).
Open the relevant Handlebars template — typically `templates/pages/product.html`, `templates/pages/category.html`, or a partial in `templates/components/` — where the `<aside>` is defined.
Locate the `<aside>` and check its parent elements. If it is nested inside `{{> components/common/main}}` or a `<main>` element, extract it and place it as a sibling of `<main>` in the page template.
Adjust the Stencil theme's SCSS (in `assets/scss/`) to keep the visual column layout using flexbox or grid on the outer wrapper.
Bundle and push the updated theme (`stencil push`) or save via the in-browser editor, then re-test accessibility.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark complementary is top level on Wix

Wix generates its own HTML and does not expose raw landmark structure for direct editing. Open the Wix Editor for your site.
Select the sidebar or complementary content strip/section. In the Wix Editor, sections are treated as top-level page blocks by default — ensure your sidebar content is a separate Section (not a box inside another section that contains the main body content).
If the sidebar is inside a multi-column layout within a single section that also contains main content, split it: create a dedicated Section for the sidebar content above or below the main content section, or use a side-by-side section layout where Wix maps each column as a distinct region.
Use the Wix Accessibility Wizard (Add-ons → Accessibility Wizard) to check for remaining landmark issues after restructuring.
For advanced control, consider using Velo (Wix's developer platform) to add custom `aria-label` attributes to sections via the Properties & Events panel.

Full Wix guide →Official Wix docs ↗

How to fix landmark complementary is top level on Squarespace

Squarespace controls landmark HTML through its template engine. Go to Pages → (select page) → Edit, and review how your sidebars or complementary content blocks are arranged.
Squarespace does not expose raw `<aside>` tags for editing in the standard editor. To inject a corrected structure, go to Settings → Advanced → Code Injection (for site-wide) or use a Page Header Code Injection block for a specific page.
In the code injection area, add a `<style>` block to restructure layout if needed, and if your theme renders an `<aside>` inside `<main>`, add a `<script>` that uses JavaScript to move the DOM node: `document.body.appendChild(document.querySelector('aside'))` — this is a client-side workaround for themes that cannot be edited directly.
For deeper control, use Squarespace Developer Mode (available on certain plans) to edit template `.region` and `.block` files and reposition the aside in the HTML structure.
Re-test with axe DevTools after publishing.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark complementary is top level on Webflow

Open your project in the Webflow Designer. In the Navigator panel (left sidebar), locate the element using an `<aside>` tag or with `role="complementary"` set.
Check its position in the hierarchy. If it is a child of a `Main` element (the element with tag set to `<main>`), drag it in the Navigator so it becomes a sibling of `Main` — both sitting inside the `Body` element.
To set or verify the HTML tag of an element, select it, open the Element Settings panel (D key), and confirm the Tag dropdown shows `aside` only for the complementary element and not for layout wrappers.
To add an accessible label, select the `<aside>` element, go to Element Settings → Custom Attributes, and add `aria-label` with a descriptive value like `Related products`.
Publish the site and re-run an axe audit in the browser to confirm the landmark is now top-level.

Full Webflow guide →Official Webflow docs ↗

How to fix landmark complementary is top level on 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.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Landmark complementary is top level?

Why does landmark complementary is top level matter?

How do I fix landmark complementary is top level?