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