Landmark complementary is top level

Moderate effort

Found on 3% of audited stores.

Move your <aside> element (or role="complementary") to the top level of the page so it is not nested inside another landmark region.

What it is

Landmarks are special HTML "signposts" that screen readers use to let users jump directly to major sections of a page — the header, main content, navigation, footer, and sidebars. The "complementary" landmark (created by an `<aside>` tag or `role="complementary"`) is meant to mark supporting content that stands on its own alongside the main content, like a sidebar, related-links panel, or promotional widget. The WCAG rule "landmark-complementary-is-top-level" fires when that `<aside>` is placed inside another landmark (for example, inside a `<main>`, `<header>`, or `<section>` with a role), rather than sitting directly inside the `<body>` at the top level of the page.

Why it matters

Screen reader users — including customers with visual impairments — rely on landmark navigation to quickly skip around a page without listening to everything. When a complementary landmark is buried inside another landmark, screen readers either misreport its purpose or completely hide it from the landmark list, making it impossible for these users to find your sidebar content (promotions, related products, trust badges, support widgets) efficiently. This is a WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and best-practice landmark structure issue, and repeated accessibility failures create legal exposure under laws like the ADA (US), EAA (EU), and AODA (Canada). Fixing it improves the experience for the roughly 7 million screen reader users in the US alone, reduces legal risk, and signals to Google that your page is well-structured.

How to fix it

Identify the offending element: search your theme/template files for `<aside` or `role="complementary"` and check whether it sits inside a `<main>`, `<header>`, `<footer>`, `<nav>`, or any element with a landmark role.
Understand your page layout: draw a quick mental map of the landmark hierarchy — `<body>` should contain `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>` as siblings, not nested inside one another.
Move the `<aside>` (or the element with `role="complementary"`) so it is a direct child of `<body>`, sitting alongside (not inside) `<main>` and other top-level landmarks.
If the aside visually appears inside a layout column that is coded inside `<main>`, restructure the HTML so the `<main>` and `<aside>` are sibling elements and use CSS (Flexbox or Grid) to achieve the two-column visual layout — the visual position does not need to match the DOM nesting.
Add a unique, descriptive `aria-label` to the aside (e.g., `aria-label="Related products"`) so screen reader users know what the complementary section contains.
Validate the fix by running an automated scan (axe DevTools, WAVE, or Lighthouse) and by navigating landmarks with a screen reader (NVDA/JAWS on Windows, VoiceOver on Mac/iOS) to confirm the aside appears in the top-level landmark list.

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 → click 'Customize', then exit to code via Actions → Edit code.
Open the relevant layout or section file: for sitewide sidebars check `layout/theme.liquid`; for page-specific sidebars check the section file under `sections/` (e.g., `sections/product-template.liquid` or `sections/collection-template.liquid`).
Find the `<aside>` or `role="complementary"` element. If it is wrapped inside `<main>…</main>` or another landmark tag, cut the entire `<aside>` block out of that container.
Paste the `<aside>` block as a sibling of `<main>` — both should be direct children of a wrapping `<div>` that is itself a direct child of `<body>`, or directly inside `<body>`.
Use CSS in `assets/theme.css` (or your custom stylesheet) with Flexbox or Grid on the wrapper `<div>` to restore the two-column layout: `display: flex;` with `<main>` and `<aside>` as flex children.
Add `aria-label="[Descriptive name]"` to the `<aside>` tag, save all files, preview the theme, and verify with axe DevTools browser extension.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark complementary is top level on WooCommerce

In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
Open the relevant template file where the sidebar appears — typically `sidebar.php`, `page.php`, `single.php`, or `archive.php` in your active (child) theme folder.
Locate the `get_sidebar()` call or the `<aside id="secondary"…>` block. If it sits between the opening and closing `<main>` tags, move it outside: place the `get_sidebar()` call after the closing `</main>` tag and before `</div>` of any wrapper.
In the corresponding template (e.g., `page.php`), ensure the structure reads: `<div class="content-area"> <main id="main">…</main> <?php get_sidebar(); ?> </div>` — both `<main>` and the sidebar `<aside>` are siblings inside the wrapper.
Apply Flexbox or Grid in your child theme's `style.css` to `.content-area` so the columns render correctly without changing the DOM nesting.
Add `aria-label="Sidebar"` (or a more specific label) to the `<aside>` in `sidebar.php`, update the files, and run axe DevTools or WAVE to confirm 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 → Themes → click 'Advanced' → Edit Theme Files (Stencil CLI recommended for safety).
Locate the Handlebars template where the sidebar renders — commonly `templates/components/common/sidebar.html` or inside a page template like `templates/pages/product.html` or `templates/pages/category.html`.
Find the `<aside>` block. If it is nested inside `{{{region name="main"}}}` or a `<main>` element, cut it out and paste it as a sibling of the `<main>` block in the same parent template.
Ensure the parent wrapper `<div>` contains `<main>` and `<aside>` as siblings, then apply a two-column CSS layout (Flexbox/Grid) in `assets/scss/` to restore the visual appearance.
Add `aria-label="Sidebar"` or a descriptive label to the `<aside>` tag.
Bundle and upload the theme, preview on a staging URL, and validate with the axe browser extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark complementary is top level on Wix

Wix generates its own HTML structure and does not expose raw landmark HTML for editing directly in the Wix Editor.
Open the Wix Editor and identify the sidebar/strip that is acting as the complementary region.
If the sidebar widget is inside a 'Container Box' or 'Section' that is itself inside another section, drag it out in the Editor layers panel so it is a top-level Section or sits alongside the main content Section.
For custom code blocks, open the Velo (Dev Mode) panel and check any `wix-ui-core` or custom HTML components — ensure `<aside>` elements in custom HTML iframes are not nested inside other landmark elements.
Use Wix's 'Accessibility Wizard' (Add → Accessibility) to add ARIA labels to sections, and label the sidebar section with a meaningful name.
Test with the axe DevTools browser extension on the live or preview URL to confirm the landmark is now top-level.

Full Wix guide →Official Wix docs ↗

How to fix landmark complementary is top level on Squarespace

Squarespace controls most landmark HTML automatically; your best lever is Custom CSS and Code Injection.
Go to Website → Pages, open the page containing the sidebar, and check whether it uses a sidebar layout (available in some templates like Brine, Avenue).
If you have injected a custom `<aside>` via Settings → Advanced → Code Injection or via a Code Block, ensure that code block is placed in its own layout row/section rather than inside a block that renders within the `<main>` content area.
If your template's theme wraps the sidebar inside `<main>`, add a CSS-only fix: use 'Custom CSS' (Design → Custom CSS) to apply `display: flex` or `display: grid` on the page wrapper so `<main>` and any sibling `<aside>` appear side by side without DOM nesting changes — contact Squarespace support or switch to a template that renders the sidebar outside `<main>` if the template's structure is the root cause.
For Developer Platform (Squarespace 7.1 Developer mode) templates, edit the JSON-T template files directly to move the `<aside>` outside the `<main>` block.
Validate the final output with axe DevTools on the live URL.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark complementary is top level on Webflow

Open your Webflow project in the Designer and locate the page or component containing the sidebar.
In the Navigator panel (left sidebar), find the element set to Tag: `<aside>` (or a Div with a custom attribute `role="complementary"`).
Check its parent in the Navigator tree. If it is nested inside an element tagged as `<main>`, `<header>`, `<nav>`, or `<footer>`, drag it out in the Navigator so it becomes a sibling of `<main>` under the same parent wrapper Div.
Set the parent wrapper Div's display to Flex or Grid (Layout panel on the right) so `<main>` and `<aside>` sit side by side visually.
Select the `<aside>` element, open Element Settings (D key), and add a custom attribute: Name `aria-label`, Value `[Descriptive sidebar name]`.
Publish the project and verify with axe DevTools on the published URL.

Full Webflow guide →Official Webflow docs ↗

How to fix landmark complementary is top level on Adobe Commerce (Magento)

In your Magento admin, go to Content → Design → Configuration → select your store view → Edit, and note the active theme.
Via FTP/SFTP or the admin theme editor, navigate to `app/design/frontend/[Vendor]/[theme]/` and locate the relevant layout XML file (e.g., `Magento_Catalog/layout/catalog_product_view.xml` for product pages or `Magento_Theme/layout/default.xml` for sitewide layout).
In the layout XML, find the block or container that renders the sidebar (`sidebar.main` or `sidebar.additional` containers). Check whether it is declared inside the `main` container in the XML hierarchy.
Move the sidebar container declaration in the XML to be a sibling of `main`, not a child — update the `parent` attribute or restructure the container nesting in the XML.
In the corresponding `.phtml` template file (e.g., `Magento_Theme/templates/root.phtml` or a page-specific template), ensure the `<aside>` tag wrapping the sidebar renders outside the `<main>` element and add `aria-label="Sidebar"` to the `<aside>`.
Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy`, then validate with axe DevTools on the storefront.

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

Does your site have this issue?

Run a free SEOLZ scan 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?