How to fix landmark complementary is top level on Squarespace

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

Steps for Squarespace

  1. Squarespace controls most landmark HTML automatically; your best lever is Custom CSS and Code Injection.
  2. 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).
  3. 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.
  4. 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.
  5. For Developer Platform (Squarespace 7.1 Developer mode) templates, edit the JSON-T template files directly to move the `<aside>` outside the `<main>` block.
  6. Validate the final output with axe DevTools on the live URL.
Official Squarespace documentation ↗

What is landmark complementary is top level?

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.

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.

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 scan — we’ll find landmark complementary is top level and every other issue across your whole site.

Scan my site free

Fix landmark complementary is top level on another platform