Landmark main is top level

Moderate effort

Found on 3% of audited stores.

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>`.

What it is

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.

Why it matters

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.

How to fix it

Audit your page's HTML source and locate every `<main>` element or element with `role="main"`. There should be exactly one per page.
Check whether that `<main>` (or `role="main"`) element is a direct child of `<body>`. Open DevTools (F12), find the element in the Elements/Inspector panel, and look at its immediate parent — it must be `<body>`.
If `<main>` is wrapped inside a `<header>`, `<nav>`, `<aside>`, `<footer>`, `<section>`, or any element that itself carries a landmark role, move `<main>` outside of it so it becomes a sibling of those landmarks, not a child.
Ensure no other landmark element (e.g. `<header>`, `<nav>`) accidentally contains your main content wrapper. Typically the correct structure is: `<body>` → `<header>` (site header) + `<nav>` (navigation) + `<main>` (page content) + `<footer>` (site footer), all as siblings.
Re-test with an automated accessibility checker (e.g. axe DevTools browser extension, WAVE, or Lighthouse) to confirm the `landmark-main-is-top-level` violation is resolved.
Manually verify with a screen reader (NVDA + Firefox, or VoiceOver + Safari) that pressing the screen reader's 'go to main content' shortcut (e.g. 'Q' in NVDA browse mode) lands you correctly at the start of the page's unique content.

<!-- ✅ 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>

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark main is top level on Shopify

In your Shopify Admin, go to Online Store → Themes → your active theme → Actions → Edit code.
Open the file `layout/theme.liquid` — this is the master page shell that wraps every page.
Look for the `<main>` tag or an element like `<div role="main">`. Check whether it is nested inside a `<header>`, `<nav>`, or other landmark element.
If so, cut the opening and closing `<main>` tags (and their `role` attribute if present) out of the wrapping landmark and paste them so `<main>` is a direct sibling of `<header>` and `<footer>`, all children of `<body>`.
Save the file and preview the theme. Re-run axe DevTools or WAVE on your storefront to confirm the violation is gone.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark main is top level on WooCommerce

In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SSH).
Open `header.php` of your active theme. Check whether the theme opens a `<main>` or `<div role="main">` tag inside the `<header>` block.
Also open `index.php`, `page.php`, `single.php`, and `archive.php` — whichever template closes the main tag — to see the full structure.
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.
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.
Use the axe browser extension on the front end to confirm the fix.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix landmark main is top level on BigCommerce

In BigCommerce Admin, go to Storefront → My Themes → your active theme → Advanced → Edit Theme Files (or use Stencil CLI locally for safer editing).
Open `templates/layout/base.html` — this is the global page shell.
Search for `<main` or `role="main"`. Verify it is not nested inside a `<header>`, `<nav>`, or `<aside>` landmark in this file.
Adjust the HTML structure so `<main>` (or the element with `role="main"`) is a direct child of `<body>`, sitting as a sibling to `<header>` and `<footer>`.
Save and push the theme, then test with axe DevTools or WAVE on a live store page.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark main is top level on Adobe Commerce (Magento)

Locate your active theme folder under `app/design/frontend/<Vendor>/<theme>/`.
Open `Magento_Theme/templates/root.phtml` (or the equivalent layout file for your theme) and inspect where `<main>` or `role="main"` is placed in the DOM hierarchy.
Also review `Magento_Theme/layout/default.xml` and any layout XML that injects blocks into the page shell to find if a container wrapping `<main>` inadvertently has a landmark role.
Edit the template/layout to ensure the `<main>` element is a direct child of `<body>`, not enclosed in another landmark. Run `bin/magento cache:clean` after changes.
Test the fix on the frontend using axe DevTools browser extension.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

How to fix landmark main is top level on Wix

Wix generates its own HTML structure and does not expose direct `<main>` tag editing in the standard Editor or Editor X/Studio.
In Wix Editor or Wix Studio, open the Page Settings for each page and check whether you have custom `<header>` or section elements wrapping the main content area; restructure sections so the primary content section is not inside a Header/Footer widget.
If you have added custom HTML via the Wix HTML iframe widget (`Embed Code` → `Embed HTML`), review that code and ensure any `<main>` or `role="main"` you've added is not wrapped in another landmark.
For deeper structural control, consider migrating to Wix Studio, which offers more semantic layout control, or raise a support ticket with Wix asking them to ensure their generated markup places `<main>` at the top level of `<body>`.
Test each page with the WAVE browser extension to confirm the landmark structure.

Full Wix guide →Official Wix docs ↗

How to fix landmark main is top level on Squarespace

Squarespace controls its own HTML output; you cannot directly edit the `<main>` tag placement from the standard UI.
Go to Website → Pages → select a page → Edit. Avoid placing your primary content blocks inside Header or Footer sections, as Squarespace may output those with landmark roles that would wrap your content.
If your Squarespace template supports Code Injection (Settings → Advanced → Code Injection), review any custom HTML you have added to the Header or Footer injection areas for stray `<main>` or `role="main"` attributes, and remove them.
For Squarespace 7.1 custom CSS/code, navigate to Website → Design → Custom CSS and ensure no custom layout code is introducing a nested `<main>`.
Contact Squarespace Support or raise a feature request if the platform's own template is emitting a nested `<main>` — this is a platform-level bug outside your direct control.
Test with WAVE or axe DevTools to check the current state of your pages.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark main is top level on Webflow

Open your project in the Webflow Designer.
In the Navigator panel (left sidebar), inspect the page structure. Find the element tagged as `<main>` — Webflow lets you set the HTML tag of any element. Click the element, then in the right-hand Settings panel (the gear icon) confirm its Tag is set to `Main`.
Ensure this `<main>` element is a direct child of `<body>` in the Navigator. It should be a sibling of your `<header>` (Navbar/Header section) and `<footer>` elements, not nested inside either.
If `<main>` is inside a `<header>` or other landmark, drag it in the Navigator to sit at the body level alongside those elements.
Publish the site and verify with axe DevTools or WAVE browser extension.

Full Webflow guide →Official Webflow docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find landmark main is top level — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Landmark main is top level?

Why does landmark main is top level matter?

How do I fix landmark main is top level?