How to fix landmark complementary is top level on WooCommerce
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 WooCommerce
- Your page template is controlled by your active WordPress theme. Go to Appearance → Theme File Editor (or edit via FTP/SSH) and open the relevant template file — commonly `page.php`, `single-product.php`, or `sidebar.php`.
- Search for `<aside`, `get_sidebar()`, or `role="complementary"` within the template. Note which landmark element wraps it (e.g. `<main id="main">`).
- If the sidebar is rendered inside `<main>`, restructure the template so `<main>` contains only the primary content and the `<aside>` / `get_sidebar()` call is a sibling outside `<main>`, both wrapped by a layout `<div class="site-content">`.
- Update your theme's CSS (`style.css` or a child-theme stylesheet) to apply a flexbox or grid layout to the wrapper div so the sidebar still appears visually alongside the content.
- If using a block theme (Full Site Editing), go to Appearance → Editor, select the template, find the Sidebar block, and use the block mover to place it outside the Main Content block at the root level of the template canvas.
- Test with the axe DevTools browser extension and a screen reader landmark shortcut to verify the fix.
<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 WooCommerce 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