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