Landmark no duplicate main

Moderate effort

Found on 4% of audited stores.

Ensure each page contains exactly one `<main>` landmark element (or one element with `role="main"`) so screen-reader users can navigate directly to the page's primary content.

What it is

Every web page should have exactly one "main landmark" — the region that holds the page's primary, unique content. This is created by using the HTML `<main>` tag or by adding `role="main"` to any container element. When a page accidentally includes two or more of these landmarks (for example, because a theme template wraps content in `<main>` and a widget or app adds another one), assistive technologies become confused about where the real content starts. The WCAG rule `landmark-no-duplicate-main` flags this exact situation.

Why it matters

Screen-reader users rely on landmarks to skip repetitive navigation and jump straight to what matters on a page — this is a foundational accessibility technique. When two `<main>` landmarks exist, screen readers may announce the wrong region, navigate to the wrong place, or skip content entirely, making your store effectively unusable for a significant portion of shoppers with disabilities. In many jurisdictions (USA, EU, UK, Australia) selling online to the public creates legal obligations under accessibility laws such as the ADA, EAA, and WCAG-based regulations; duplicate landmarks are a clear, auditable WCAG 2.x violation that can appear in demand letters and audits. Fixing it also signals clean, well-structured HTML to search engines, which can marginally support crawlability and indexing.

How to fix it

Audit your page source: open the page in a browser, right-click › View Page Source (or use browser DevTools › Elements), and search for '<main' and 'role="main"'. Count how many times each appears — there should be exactly one combined total.
Identify the origin of each duplicate: is it in your theme's layout file, a page-builder section, an embedded app/widget, or a custom code block? Note the file or component name for each.
Designate the correct single `<main>` (or `role="main"`) wrapper: this should be the outermost container that holds the page's unique content, excluding site-wide header, footer, and navigation.
Remove or replace all additional `<main>` elements or `role="main"` attributes. If a secondary container needs a semantic role, use a more specific landmark such as `<section>` (with an accessible name via `aria-label`) or `<article>` instead.
If a third-party app or widget is injecting a rogue `<main>`, contact the app vendor or override the output with a CSS/JS snippet that changes the tag — but prefer fixing the markup at the source.
Re-test using a browser accessibility extension (axe DevTools, WAVE, or Chrome Accessibility Tree) to confirm only one main landmark is reported.

<main>
  <!-- All unique page content lives here — product listings,
       article body, cart, etc. -->
</main>

<!-- ✅ Only ONE <main> per page. Everything else uses
     <header>, <nav>, <aside>, <footer>, <section>, or <article>. -->

<!-- ❌ Do NOT add a second <main> or role="main" anywhere else on the same page -->
<!-- <div role="main">…</div>  ← remove this if <main> already exists -->

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 › (your active theme) › Actions › Edit code.
Open 'layout/theme.liquid' — this is the master page wrapper. Search for '<main' and 'role="main"'. There should be exactly one instance.
If a duplicate appears in a section file (e.g. 'sections/main-product.liquid', 'sections/main-collection.liquid'), open each suspect file and replace any extra '<main>' with '<section aria-label="…">' or '<div>'.
If a third-party Shopify app is injecting an extra '<main>', check the App Embeds area (Online Store › Themes › Customize › App Embeds) or review the app's own settings for layout override options, and contact the app's support if needed.
Save changes, then use the Shopify Theme Preview to verify the fix before publishing.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark no duplicate main on Shopify Plus

Follow the same steps as Shopify above. On Shopify Plus, also check any custom checkout.liquid (Checkout › Branding, or the legacy checkout.liquid file) for a duplicate '<main>' or 'role="main"'.
If using Hydrogen (headless), locate the root layout component (typically 'app/root.tsx' or 'app/routes/_index.tsx') and ensure only one '<main>' is rendered in the component tree.

Full Shopify Plus guide →Official Shopify Plus docs ↗

How to fix landmark no duplicate main on WooCommerce

The '<main>' landmark lives in your active WordPress theme. Navigate to Appearance › Theme File Editor (or use a local/staging FTP/SSH client for safety).
Open the theme's 'header.php' and 'page.php' / 'single.php' / 'archive.php' — search each for '<main' and 'role="main"'. Consolidate to exactly one.
If you are using a block theme (Full Site Editing), go to Appearance › Editor › Templates, select the relevant template, switch to Code Editor view, and inspect the markup for duplicate 'core/group' blocks set as 'tagName: main'.
If a page-builder plugin (Elementor, Divi, Beaver Builder) is adding the duplicate, check the plugin's layout settings or its page/post wrapper element and change its HTML tag from 'main' to 'div' or 'section'.
Install the 'axe DevTools' browser extension and re-scan the page to confirm one main landmark.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix landmark no duplicate main on BigCommerce

Go to Storefront › My Themes › (active theme) › Advanced › Edit Theme Files.
Open 'templates/layout/base.html' (Cornerstone theme) and search for '<main' and 'role="main"'. Ensure only one exists.
Check page-specific templates in 'templates/pages/' (e.g. 'product.html', 'category.html') for any additional '<main>' tags and replace them with '<section>' or '<div>'.
If a widget placed in Page Builder (Storefront › Page Builder) is injecting extra markup, open that widget's HTML and remove or change any '<main>' tag.
Preview the storefront page and verify with browser DevTools (Accessibility panel) or the WAVE extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark no duplicate main on Wix

Wix renders its own HTML structure, and the '<main>' landmark is controlled by the platform. You cannot directly edit the generated HTML in standard Wix.
Open the Wix Editor. Avoid placing multiple 'Header', repeated 'Page' sections, or stacked full-page containers that Wix might translate into duplicate main landmarks.
If you have added custom HTML via a Wix HTML Embed (Add › Embed Code › HTML iframe or Embed a Widget), open that embed and check if it contains a '<main>' or 'role="main"' attribute — remove it and use a '<div>' instead.
For Wix Studio or advanced Velo sites, check any custom Page Code or site-wide code (Site › Edit Code) that injects structural HTML and remove any duplicate '<main>' elements.
Re-test the live page with the WAVE browser extension to confirm only one main landmark is detected.

Full Wix guide →Official Wix docs ↗

How to fix landmark no duplicate main on Wix Studio

In Wix Studio, open the page in the Editor. Click on each section/container and check its element settings — avoid assigning 'role="main"' via custom attributes to more than one element.
Open the site's custom code panel (Site › Custom Code or the Dev Mode panel) and search for any injected 'role="main"' strings in head or body code snippets.
If using Velo (Dev Mode enabled), inspect the page's '$w' element tree in code and ensure no custom HTML component outputs a '<main>' tag when one already exists in the page structure.
Test with WAVE or axe DevTools browser extension on the published or preview URL.

Full Wix Studio guide →Official Wix Studio docs ↗

How to fix landmark no duplicate main on Squarespace

Squarespace controls most of its page structure automatically. Open Pages › (your page) › Edit, and check whether you have added any Code Blocks (Insert Point › Code) that contain a '<main>' tag — if so, change it to '<section>' or '<div>'.
Go to Design › Custom CSS or Website › Pages › (page) › Advanced › Page Header Code Injection and search for any 'role="main"' or '<main' strings; remove duplicates.
If using a Developer Platform (Local Development) template, open the template's '.region' or '.block' files and consolidate to one '<main>' in the base layout.
Re-test the live page with the axe DevTools or WAVE browser extension to confirm no duplicate main landmarks.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark no duplicate main on Webflow

Open your project in the Webflow Designer. In the Navigator panel (left sidebar), inspect the page structure for any element whose tag is set to '<main>'.
Click each suspect container element, open the Element Settings panel (right sidebar, gear icon), and check the 'Tag' dropdown. Only ONE element across the entire page should be set to 'Main'. Change any additional ones to 'Section', 'Div Block', or 'Article' as appropriate.
Check any Symbols or Components used on the page — open each Symbol and verify it does not internally use a '<main>' tag.
If third-party embed code (via Embed components) injects '<main>', edit the embed HTML and replace it with '<div>' or '<section>'.
Publish the site and re-test with the axe DevTools browser extension.

Full Webflow guide →Official Webflow docs ↗

How to fix landmark no duplicate main on Adobe Commerce (Magento)

The main landmark is defined in your theme's layout XML and PHTML templates. Locate your active theme under 'app/design/frontend/<Vendor>/<Theme>/'.
Open '1column.phtml', '2columns-left.phtml', etc. in the 'Magento_Theme/templates/root/' directory and search for '<main' and 'role="main"'. There should be only one.
Also search layout XML files (e.g. 'default.xml', 'catalog_product_view.xml') for any '<referenceContainer>' or '<block>' that adds a second 'role="main"' attribute via a template.
If a third-party extension is adding the duplicate, override its template in your custom theme by copying the PHTML to your theme path and editing it to remove or change the '<main>' tag.
Run 'php bin/magento cache:clean' and 'setup:static-content:deploy', then re-test with the axe DevTools extension.

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

How to fix landmark no duplicate main on Magento Open Source

Follow the same steps as Adobe Commerce above — the theme file paths and layout XML structure are identical for Magento Open Source.

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

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Landmark no duplicate main?

Why does landmark no duplicate main matter?

How do I fix landmark no duplicate main?