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