SEOLZ

How to fix landmark main is top level on WooCommerce

Move the `<main>` element (or `role="main"`) so it is a direct child of `<body>` and not nested inside any other landmark element such as `<header>`, `<nav>`, `<aside>`, or `<footer>`.

Steps for WooCommerce

  1. In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SSH).
  2. Open `header.php` of your active theme. Check whether the theme opens a `<main>` or `<div role="main">` tag inside the `<header>` block.
  3. Also open `index.php`, `page.php`, `single.php`, and `archive.php` — whichever template closes the main tag — to see the full structure.
  4. Restructure so the `<main>` (or `role="main"` wrapper) opens *after* `get_header()` / the closing `</header>` tag and closes *before* `get_footer()` / the opening `<footer>` tag, making it a sibling of, not a child of, other landmarks.
  5. If your theme uses a page builder like Elementor or Divi, check those builders' global layout/canvas settings for an option to wrap content in `<main>` and ensure it is placed at the top level.
  6. Use the axe browser extension on the front end to confirm the fix.
Official WooCommerce documentation ↗
<!-- ✅ CORRECT: <main> is a top-level sibling of other landmarks -->
<body>
  <header>…site logo and branding…</header>
  <nav>…navigation links…</nav>
  <main>
    …unique page content…
  </main>
  <footer>…footer links…</footer>
</body>

<!-- ❌ INCORRECT: <main> is nested inside <header> -->
<body>
  <header>
    …site logo and branding…
    <main>   <!-- wrong! <main> must not live inside <header> -->
      …page content…
    </main>
  </header>
  <footer>…</footer>
</body>

What is landmark main is top level?

Every webpage should have one clearly defined "main content" region that screen readers and other assistive technologies can jump to directly. In HTML this is the `<main>` element (or any element marked with `role="main"`). The WCAG rule "landmark-main-is-top-level" means that this main region must sit at the top level of the page structure — as a direct child of `<body>` — and must not be wrapped inside another landmark region like `<header>`, `<nav>`, `<aside>`, or `<footer>`. Nesting `<main>` inside another landmark confuses the accessibility tree and breaks the expected page hierarchy that assistive technologies rely on.

Screen reader users — including many people with visual impairments — use keyboard shortcuts to skip straight to the main content of a page, bypassing repetitive navigation menus. When `<main>` is incorrectly nested inside another landmark, that shortcut either fails silently or lands the user in the wrong place, forcing them to tab through every menu item on every page visit. This is a WCAG 2.1 / 2.2 failure (Best Practice, closely tied to Success Criterion 1.3.6 and the bypass-blocks requirement at 2.4.1), which creates legal accessibility risk under ADA Title III in the US, the European Accessibility Act, and similar laws globally. Beyond legal exposure, poor accessibility reduces your potential customer base and signals poor technical quality to search engines that increasingly factor accessibility into crawl quality.

See the complete Landmark main 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 main is top level and every other issue across your whole site.

Scan my site free

Fix landmark main is top level on another platform