Landmark no duplicate main
Quick winFound on 11% of audited stores.
Find and remove every duplicate `<main>` element or `role="main"` attribute so that exactly one main landmark exists on each page.
What it is
Every web page should have exactly one "main" landmark — the HTML `<main>` element (or any element with `role="main"`) — that wraps the primary content of that page. This landmark is part of the ARIA landmark system, which acts like a table of contents for assistive technology users. When a page has more than one `<main>` landmark, the structure is ambiguous and broken: screen readers, keyboard navigators, and other assistive tools cannot reliably identify where the page's core content begins and ends. The fix is to ensure only one `<main>` or `role="main"` exists in the entire rendered HTML of any given page.
Why it matters
Screen reader users — including blind shoppers and customers with motor disabilities — routinely press a single keystroke to jump directly to the main content area, skipping repeated navigation menus. If two `<main>` landmarks exist, assistive technology either stops at the first one (potentially landing on a header or widget instead of your products) or announces confusing duplicate regions, eroding trust and causing shoppers to abandon the page. WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and wider landmark guidance require unique landmark roles; failing this check exposes your store to accessibility-compliance risk in jurisdictions with ADA, EAA, or EN 301 549 obligations. Fixing it is typically a quick template change with zero visual impact, so the risk-to-effort ratio strongly favours acting immediately.
How to fix it
- Audit the rendered (live) HTML of the affected page — open DevTools → Elements (or use View Source after JavaScript runs) and search for '<main' and 'role="main"'. Count every occurrence.
- Identify which element is the true main content wrapper (usually the outermost content area that sits between your site header/nav and footer).
- For any additional `<main>` elements or `role="main"` attributes that are NOT the true main wrapper, either remove the tag entirely (replacing `<main>` with a semantically neutral `<div>` or a more appropriate landmark like `<section>` or `<article>`) or remove just the `role="main"` attribute from the extra element.
- Check your theme's template files — header, footer, sidebar, and widget partials are common sources of accidental duplicate landmarks injected outside the main content block.
- Verify no third-party app, plugin, chat widget, or injected script is adding its own `<main>` or `role="main"` to the page DOM.
- Re-test in a browser with axe DevTools or the free axe browser extension to confirm the landmark-no-duplicate-main rule now passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix landmark no duplicate main on Shopify
- Go to Online Store → Themes → Actions → Edit code.
- Open layout/theme.liquid — this is the master page shell. Search for '<main' and 'role="main"'. There should be exactly one; it typically wraps '{{ content_for_layout }}'.
- Open sections/ and snippets/ files (especially header.liquid, footer.liquid, sidebar snippets) and search each for '<main' or 'role="main"'. Remove or replace any extras with '<div>' or '<section>'.
- If you use a third-party app that injects a chat or overlay widget, inspect the live page DOM in DevTools after the app loads to check whether it also adds a landmark.
- Save changes and verify with the axe browser extension on your storefront.
How to fix landmark no duplicate main on Shopify Plus
- Follow the same steps as Shopify above; also check any custom checkout.liquid if it is enabled on your plan — it has its own layout and may independently contain a duplicate '<main>' tag.
- Review scripts added via Shopify Scripts or custom pixel injections in Settings → Customer events for DOM insertions.
How to fix landmark no duplicate main on WooCommerce
- In WordPress admin go to Appearance → Theme File Editor (or use a file manager / SFTP).
- Open your active theme's header.php, footer.php, sidebar.php, and page.php / single.php / archive.php templates. Search each for '<main' and 'role="main"'.
- The canonical pattern for most themes is a single '<main id="main" class="site-main">' in page.php or index.php that wraps the Loop. Remove 'role="main"' from any other element that also carries it, or change extra '<main>' tags to '<div>'.
- If you use a page builder (Elementor, Divi, Beaver Builder), switch to the builder's page view and inspect the rendered HTML — builders sometimes wrap sections in their own '<main>' containers. Fix via the builder's HTML/custom code widget or by editing the builder's core template.
- Install the free axe DevTools browser extension and run it on the frontend to confirm only one main landmark remains.
How to fix landmark no duplicate main on BigCommerce
- Go to Storefront → Themes → Advanced → Edit Theme Files (Stencil CLI) or use the in-browser editor for Blueprint themes.
- In Stencil themes open templates/layout/base.html and search for '<main' and 'role="main"'. Only one should exist, wrapping '{{> region name="main"}}'.
- Check templates/components/common/header.html and footer.html for stray '<main>' tags or 'role="main"' attributes; replace with '<div>' where needed.
- Re-bundle and push the theme (stencil push) then verify with DevTools or the axe extension on the live storefront.
How to fix landmark no duplicate main on Wix
- Wix controls its own HTML output, so you cannot directly edit template files. Instead, open the Wix Editor and check whether you have added any HTML iframes or Embed Code widgets (Insert → Embed Code → HTML iframe) that contain a '<main>' tag — remove it from the custom HTML block.
- In Wix Studio, inspect any custom-coded sections or components for '<main>' or 'role="main"' in their HTML and replace with '<div>'.
- Use the axe browser extension on the published site to confirm the fix. If the duplicate originates from Wix's own generated markup (not your custom code), report it via Wix Support as a platform accessibility bug.
How to fix landmark no duplicate main on Wix Studio
- Open Wix Studio Editor and navigate to the page in question.
- Select any custom-coded components or HTML embed elements and inspect their markup for '<main>' or 'role="main"'; replace with '<div>' or '<section>'.
- In the panel for any Velo/custom code blocks, search for 'role="main"' and remove duplicates.
- Publish the site and validate with the axe browser extension.
How to fix landmark no duplicate main on Squarespace
- Squarespace generates most landmark HTML automatically; duplicate `<main>` issues usually come from custom code injections. Go to Settings → Advanced → Code Injection and check the Header, Footer, and Page Header/Footer injection fields for any '<main>' or 'role="main"' in your custom HTML.
- Also check individual pages: Pages → (select page) → gear icon → Advanced → Page Header Code Injection.
- Remove any '<main>' tags from injected code; replace with '<div>' or '<section>'.
- If you have a Developer Platform (Squarespace 7.0) site with custom templates, open the relevant .region or .block files and search for duplicate '<main>' usage.
- Verify with the axe browser extension on the live page.
How to fix landmark no duplicate main on Webflow
- Open the Webflow Designer for the affected page or template.
- In the Navigator panel (left sidebar) expand the page structure and look for any element explicitly tagged as '<main>' (a 'Main' element in the HTML tag dropdown) or any element with a custom attribute 'role' set to 'main'.
- There should be exactly one. Select any duplicates, open the Element Settings panel (D key), change the HTML tag from 'main' to 'div' or another appropriate element, and remove any 'role="main"' custom attribute.
- Also check global symbols (navbar, footer, CMS Collection wrappers) for inadvertent '<main>' tags.
- Publish the site and verify with the axe browser extension.
How to fix landmark no duplicate main on Adobe Commerce (Magento)
- Identify the active theme under Content → Design → Configuration.
- In your theme directory (app/design/frontend/<Vendor>/<theme>/) open Magento_Theme/templates/root.phtml (or the equivalent base layout file). Search for '<main' and 'role="main"'.
- Also check layout XML files in Magento_Theme/layout/default.xml and any module layout overrides for blocks that render their own '<main>' wrapper.
- Edit the offending template to replace extra '<main>' tags with '<div>' or '<section>', redeploy static content (bin/magento setup:static-content:deploy), flush cache (bin/magento cache:flush), and verify on the frontend.
How to fix landmark no duplicate main on Magento Open Source
- Follow the same steps as Adobe Commerce above — the file paths and CLI commands are identical for Magento Open Source.
How to fix landmark no duplicate main on PrestaShop
- Navigate to your active theme folder at /themes/<your-theme>/templates/. Open _layouts/layout-full-width.tpl (and other layout .tpl files).
- Search for '<main' and 'role="main"'. Keep only the one wrapping the central content block ({block name='content'}) and change any others to '<div>'.
- Also check header.tpl and footer.tpl in _partials/ for stray main landmark usage.
- Clear the PrestaShop cache under Advanced Parameters → Performance → Clear cache, then verify with the axe extension.
How to fix landmark no duplicate main on OpenCart
- Open your active theme's template files under catalog/view/theme/<your-theme>/template/common/. Check header.twig/header.tpl and footer.twig/footer.tpl for '<main' or 'role="main"'.
- The primary content wrapper is typically in catalog/view/theme/<your-theme>/template/common/content*.twig. Keep exactly one '<main>' there and convert any duplicates to '<div>'.
- Refresh the OpenCart cache and verify with the axe extension.
How to fix landmark no duplicate main on Headless / Custom (I build in code)
- Search your entire component and layout codebase (e.g., grep -r '<main\|role=.main' src/) for every occurrence of '<main>' elements or 'role="main"' attributes.
- Trace which components are composed into a single page render — layout shell, header component, footer component, sidebar, main content area — and ensure only the top-level content wrapper uses '<main>' or 'role="main"'.
- Replace all other occurrences with semantically appropriate elements: '<section>' for thematic content groupings, '<article>' for self-contained pieces, or '<div>' for purely presentational wrappers.
- Add an automated accessibility test (e.g., jest-axe or Playwright with axe-core) to your CI pipeline that asserts landmark-no-duplicate-main passes on every page template.
Does your site have this issue?
Run a free SEOLZ scan to find landmark no duplicate main — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Landmark no duplicate main?
Every web page should have exactly one "main" landmark — the HTML `<main>` element (or any element with `role="main"`) — that wraps the primary content of that page. This landmark is part of the ARIA landmark system, which acts like a table of contents for assistive technology users. When a page has more than one `<main>` landmark, the structure is ambiguous and broken: screen readers, keyboard navigators, and other assistive tools cannot reliably identify where the page's core content begins and ends. The fix is to ensure only one `<main>` or `role="main"` exists in the entire rendered HTML of any given page.
Why does landmark no duplicate main matter?
Screen reader users — including blind shoppers and customers with motor disabilities — routinely press a single keystroke to jump directly to the main content area, skipping repeated navigation menus. If two `<main>` landmarks exist, assistive technology either stops at the first one (potentially landing on a header or widget instead of your products) or announces confusing duplicate regions, eroding trust and causing shoppers to abandon the page. WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and wider landmark guidance require unique landmark roles; failing this check exposes your store to accessibility-compliance risk in jurisdictions with ADA, EAA, or EN 301 549 obligations. Fixing it is typically a quick template change with zero visual impact, so the risk-to-effort ratio strongly favours acting immediately.
How do I fix landmark no duplicate main?
Find and remove every duplicate `<main>` element or `role="main"` attribute so that exactly one main landmark exists on each page.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN