Landmark main is top level

Quick win

Found on 9% of audited stores.

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

What it is

Every webpage should have exactly one "main" landmark — the HTML `<main>` tag or any element with `role="main"` — that tells assistive technologies like screen readers "this is where the primary content begins." The WCAG rule `landmark-main-is-top-level` fires when that `<main>` landmark is accidentally placed inside another landmark element (such as `<header>`, `<nav>`, `<section>`, `<aside>`, or `<footer>`) instead of being a direct child of `<body>`. Think of landmarks like a building's floor plan: the "main hall" should open directly off the entrance, not be hidden inside a closet inside a side room.

Why it matters

Screen-reader users rely on landmark navigation to jump straight to the main content, skipping repetitive menus and headers — a fundamental assistive-technology workflow. When `<main>` is buried inside another landmark, screen readers mis-report the page structure, the "skip to content" shortcut may stop working, and keyboard-only users are forced to tab through every navigation item on every page. This directly harms the browsing experience for customers with disabilities and exposes your store to legal risk under laws tied to WCAG 2.1 compliance (ADA in the US, EN 301 549 in the EU, AODA in Canada, and equivalents worldwide). Fixing it is also a positive signal for Google's accessibility-aware ranking considerations and demonstrates a technically well-structured page to crawlers.

How to fix it

Open your theme's main layout/template file (the one that outputs the full HTML shell — often called theme.liquid, base.html, layout.php, or similar).
Search the file for the `<main>` tag or any element that has `role="main"` on it.
Inspect the HTML hierarchy around it: check whether it is wrapped inside `<header>`, `<nav>`, `<section>`, `<aside>`, `<footer>`, or any other element that carries a landmark role.
If it is nested, cut the entire `<main>…</main>` block out of the surrounding landmark and paste it as a direct sibling of `<body>`'s other top-level children (e.g., directly after the closing `</header>` tag and before the opening `<footer>` tag).
Save and preview the page; use a browser extension (axe DevTools, Lighthouse, or WAVE) to confirm the violation is resolved and that `<main>` now appears as a top-level landmark in the accessibility tree.
Also verify that any 'Skip to main content' link at the top of the page still correctly targets the `<main>` element's `id` attribute.

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 → click 'Customize' next to your active theme, then exit Customize and instead click the '…' menu → Edit code.
In the Layout folder, open 'theme.liquid' (the master HTML shell for almost every Shopify theme).
Search (Ctrl/Cmd+F) for '<main' or 'role="main"'.
Check what HTML tag directly wraps the `<main>` element. Common culprits: a `<div role='banner'>`, a `<header>`, or a wrapper `<section>`.
Cut the entire `<main>…</main>` block (and its closing tag) and paste it as a direct child of `<body>`, typically right after the closing `</header>` tag.
Click Save, then visit a storefront page and run axe DevTools or WAVE in your browser to confirm the fix.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark main is top level on Shopify Plus

Follow the same steps as Shopify above; Shopify Plus uses the same theme architecture.
If you use a custom Hydrogen (headless) storefront, locate the root layout component (e.g., app/root.jsx or app/components/Layout.jsx) and ensure `<main>` is rendered as a direct child of the document body element, not inside a `<header>` or landmark wrapper component.

Full Shopify Plus guide →Official Shopify Plus docs ↗

How to fix landmark main is top level on WooCommerce

In your WordPress Admin, go to Appearance → Theme File Editor (or use a local editor/FTP).
Open your active theme's 'header.php'. Look for a `<main>`, `<div id='main'>`, or `<div role='main'>` that opens inside the `<header>` tag — this is the most common location of the bug.
If `<main>` opens inside `header.php` but inside a landmark wrapper, move its opening tag to just after the closing `</header>` tag (or to the very top of 'index.php' / page templates before other content).
Check that the matching closing `</main>` tag is in 'footer.php' before the `<footer>` landmark, not inside it.
If you use a page builder (Elementor, Divi, etc.), those tools often inject their own wrappers — install the 'Editorskit' or 'Accessibility Checker' plugin and follow its landmark audit to locate the nesting.
Save, flush any caching plugin, and verify with WAVE or axe in your browser.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix landmark main is top level on BigCommerce

In your BigCommerce Admin, go to Storefront → My Themes → click 'Advanced' → Edit Theme Files (for Stencil themes).
Open 'templates/layout/base.html' — this is the master HTML shell.
Search for `<main` or `role="main"`.
Check if it is wrapped by a `<header>` or other landmark-tagged element. If so, move the `<main>` opening tag to sit directly after the closing `</header>` tag at the top-level of `<body>`.
Ensure the closing `</main>` tag appears before the opening `<footer>` tag.
Push changes, clear the CDN cache, and validate with an axe browser extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark main is top level on Wix

Wix generates HTML automatically from its editor layout; you cannot directly edit the raw HTML output.
Open the Wix Editor and inspect which section or strip contains your primary page content.
Ensure no 'Header' or 'Footer' section in the Wix Editor visually or logically wraps the page body content — Wix maps these to landmark regions internally.
Use the Wix Accessibility Wizard (Add → Accessibility → Accessibility Wizard) to check for landmark issues it can detect and auto-fix.
For persistent issues, contact Wix Support and reference WCAG 2.1 Success Criterion 1.3.6 / landmark structure, as the underlying HTML is platform-controlled.
If you use Wix Velo (developer mode), you can add `role` attributes to custom-coded sections to avoid conflicting landmarks, but the core `<main>` placement remains platform-managed.

Full Wix guide →Official Wix docs ↗

How to fix landmark main is top level on Wix Studio

Wix Studio also generates its landmark HTML automatically. Open the Studio Editor and verify that content sections are correctly categorized as body content (not placed inside the Header or Footer panels).
Use the built-in Accessibility panel (available under the site settings / SEO & Accessibility tab) to review landmark warnings.
For custom-coded widgets or sections using Velo, ensure you do not apply `role='banner'`, `role='navigation'`, or other landmark roles to containers that wrap your main content block.
Escalate persistent issues to Wix Studio support referencing the specific WCAG landmark nesting requirement.

Full Wix Studio guide →Official Wix Studio docs ↗

How to fix landmark main is top level on Squarespace

Squarespace controls its own HTML landmark structure; you cannot directly reorder `<main>` vs. `<header>` through the visual editor.
Go to Pages → select a page → click Edit, and ensure your main content sections/blocks are not placed inside a Header or Footer content area.
Navigate to Website → Pages → Website Tools → Custom CSS or inject code via Settings → Advanced → Code Injection: add a diagnostic script only (you cannot rewrite landmark tags via CSS injection).
If the violation originates from a Squarespace template bug (some older templates wrap content inside header regions), switch to a newer Fluid Engine template, which has improved semantic structure.
For code blocks, avoid adding `role` attributes that could create extra landmarks wrapping your content.
Report persistent template-level violations to Squarespace support, referencing the landmark-main-is-top-level WCAG rule.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark main is top level on Webflow

In the Webflow Designer, open the page or the site's global layout.
In the Navigator panel (left sidebar), find the element that has the 'Main' tag or has 'role=main' set — typically a Section or Div element labeled 'Main Wrapper' or similar.
Check its parent element in the Navigator. If the parent is a 'Header' element, a Nav, or any other landmark-tagged container, drag the Main element out so it is a direct child of the Body node in the Navigator.
To set or verify the HTML tag: select the element → go to Element Settings (D key) → HTML Tag → choose 'main'.
Ensure the Header and Footer elements are siblings of Main, not parents.
Publish the site and verify with axe DevTools or WAVE in your browser.

Full Webflow guide →Official Webflow docs ↗

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

Locate your active theme directory: app/design/frontend/<Vendor>/<theme>/
Open Magento_Theme/templates/root.phtml (or the equivalent layout handle file) to inspect the top-level HTML shell.
Search for `<main` or `role="main"` across your theme's template files (use grep: `grep -r 'role="main"' app/design/frontend/<Vendor>/<theme>/`).
If the `<main>` element or `role="main"` div is nested inside a `<header>` block or another landmark element, edit the template to move it outside — it should sit between the closing `</header>` and opening `<footer>` as a direct child of `<body>`.
Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving.
Validate the fix with axe DevTools or WAVE on a frontend page.

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

How to fix landmark main is top level on Magento Open Source

Follow the same steps as Adobe Commerce (Magento) above — the theme file structure is identical.
If you are using a third-party theme (e.g., Hyvä), check the theme's main layout template (typically resources/views/layouts/default.phtml or similar) and apply the same landmark reordering logic.

Full Magento Open Source guide →Official Magento Open Source docs ↗

How to fix landmark main is top level on Headless / Custom (I build in code)

In your root layout component or base HTML template, locate the element rendered as `<main>` or carrying `role='main'`.
Ensure it is a direct child of `<body>` in the rendered DOM — confirm with browser DevTools (Elements tab → inspect the full DOM tree).
Restructure your component tree so that Header, Nav, and Footer components are siblings of Main, not ancestors.
Run `npx axe-core` or integrate axe-core into your CI pipeline to catch regressions automatically.
Use the Accessibility Tree view in Chrome DevTools (Accessibility tab) to verify `<main>` appears as a top-level landmark with no landmark parent.

Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

Does your site have this issue?

Run a free SEOLZ scan 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?

Every webpage should have exactly one "main" landmark — the HTML `<main>` tag or any element with `role="main"` — that tells assistive technologies like screen readers "this is where the primary content begins." The WCAG rule `landmark-main-is-top-level` fires when that `<main>` landmark is accidentally placed *inside* another landmark element (such as `<header>`, `<nav>`, `<section>`, `<aside>`, or `<footer>`) instead of being a direct child of `<body>`. Think of landmarks like a building's floor plan: the "main hall" should open directly off the entrance, not be hidden inside a closet inside a side room.

Why does landmark main is top level matter?

How do I fix landmark main is top level?