Landmark one main
Quick winFound on 42% of audited stores.
Add a single `<main>` landmark element (or `role="main"`) to every page so assistive technologies can identify and navigate directly to the primary content.
What it is
Every web page should have exactly one "main" landmark — a special HTML tag (`<main>`) or ARIA role (`role="main"`) that marks the start of the primary content on the page. Think of it like a "skip to content" anchor that is built directly into the page structure. Screen readers and other assistive technologies use landmarks to let users jump between sections (navigation, header, main content, footer) without having to listen to everything in order. The `landmark-one-main` rule specifically checks that your page has one — and only one — such marker.
Why it matters
Without a main landmark, people who use screen readers (blind users, users with motor disabilities who rely on keyboard or switch navigation) must tab through every link, menu item, and banner on your page before they reach any product or content — on every single page load. This is a major usability barrier that can expose your store to accessibility lawsuits under the ADA (US), AODA (Canada), EAA (EU), and similar regulations that require conformance with WCAG 2.1. Fixing it is also a WCAG 2.1 Success Criterion 1.3.6 and 2.4.1 compliance item. Additionally, Google's crawlers and structured-data systems recognise landmark regions, so clear page structure can indirectly support crawl efficiency and rich-result eligibility.
How to fix it
- Audit every page template in your theme/site for the presence of a `<main>` element or any element with `role="main"`. There should be exactly one per page.
- If no `<main>` element exists, identify the wrapper `<div>` or `<section>` that contains the unique page content (not the header, navigation, or footer) and change its tag to `<main>`, or add `role="main"` to it.
- Ensure you have no more than one `<main>` / `role="main"` per page — duplicate landmarks are just as problematic as none.
- If your theme uses 'skip navigation' links (e.g. `<a href="#main-content">Skip to main content</a>`), make sure the target ID is on the same `<main>` element: `<main id="main-content">`.
- Re-test with a free tool such as the axe DevTools browser extension or NVDA/VoiceOver to confirm the landmark is detected and there is exactly one.
- Repeat the check for any page type that uses a different template — home, category/collection, product, cart, checkout, blog, and contact pages may each have their own template file.
Fix it on your platform
Pick your platform for the exact steps.
How to fix landmark one main on Shopify
- In your Shopify Admin, go to Online Store → Themes → click the three-dot menu on your active theme → Edit code.
- Open `layout/theme.liquid` — this is the master layout that wraps every page.
- Find the `<div>` (often something like `<div class="main-content" id="MainContent">`) that wraps `{{ content_for_layout }}`.
- Change that opening tag to `<main id="MainContent" role="main">` and its closing tag to `</main>` (or simply `<main id="MainContent">` — the semantic element implies the role).
- If a 'Skip to main content' link already exists in the header, confirm its `href` matches `#MainContent`.
- Save, then verify with the axe browser extension on a live preview.
How to fix landmark one main on Shopify Plus
- Same as Shopify: go to Online Store → Themes → Edit code → `layout/theme.liquid`.
- For checkout customisations, go to Settings → Checkout → Edit checkout (if on Checkout Extensibility). The checkout page landmark is managed by Shopify's checkout UI — you cannot directly edit the checkout HTML on Plus unless using a custom checkout.liquid (legacy). Focus on storefront templates.
- Wrap `{{ content_for_layout }}` in `<main id="MainContent">…</main>` in `theme.liquid` as above.
How to fix landmark one main on WooCommerce
- The correct file to edit depends on your active theme. In WordPress Admin, go to Appearance → Theme File Editor (or edit files via FTP/SSH).
- Open your active theme's `header.php`. Look for the closing `</header>` tag — the `<main>` element typically opens immediately after it.
- If the content area is a `<div id="primary">` or similar, change it to `<main id="primary" class="site-main">` and update the matching closing tag in `footer.php` or `index.php`.
- For block themes (WordPress 6+): go to Appearance → Editor → Templates → select a template (e.g. Single Product). In the block list panel, locate the 'Group' or 'Content' block that holds page content, click it, and in the sidebar under 'Advanced → HTML element' choose `<main>`.
- Install and run the free WP Accessibility plugin — it can audit and patch missing landmarks automatically.
- Re-test with axe DevTools.
How to fix landmark one main on BigCommerce
- In your BigCommerce Admin, go to Storefront → My Themes → click Advance → Edit Theme Files (or download your theme for local editing).
- Open `templates/layout/base.html` — this is the master template equivalent.
- Find the wrapper around `{{content}}` (often `<div class="container">` or `<div id="page-wrapper">`). Change the opening tag to `<main id="page-content">` and the closing to `</main>`.
- Ensure any 'Skip to content' link in the header targets `#page-content`.
- Upload/save the file, then publish the theme and verify with the axe extension.
How to fix landmark one main on Wix
- Wix generates its own HTML and does not expose direct markup editing in the classic editor. Instead, go to your Wix Editor, click the area that holds your main page content, and in the Properties panel look for 'Accessibility' settings.
- Use the Wix Accessibility Wizard (available in the editor's left toolbar under the accessibility icon) — it will flag missing landmarks and guide you through applying them.
- For custom code injection: go to Settings → Custom Code → add a `<script>` in the body-end position that finds your main content container by its known ID and sets `el.setAttribute('role','main')` — but test carefully to avoid duplicate roles.
- If using Wix Studio, open the Design panel for the main section block, switch to the HTML/Properties panel, and set the semantic element to `<main>` where available.
- Re-test with the axe DevTools extension on your published site.
How to fix landmark one main on Wix Studio
- In Wix Studio's editor, select the main content section of your page in the layers panel.
- In the right-hand Properties / Settings panel, look for the 'Element Tag' or 'HTML Tag' dropdown and select `<main>`.
- Alternatively, use the Accessibility panel (the person icon in the left toolbar) to run an audit and apply the landmark fix through the guided wizard.
- Publish the site and re-test with axe DevTools.
How to fix landmark one main on Squarespace
- Squarespace does not allow direct HTML structural edits to its layout. Go to Website → Pages, and for each page open the page settings.
- In the Design tab of your page, look for a 'Page Section' with an Advanced or Custom CSS/Code block option.
- Use Settings → Advanced → Code Injection (available on Business plan and above) to inject a small JavaScript snippet into the page footer that programmatically adds `role="main"` to the primary content wrapper (commonly `#page` or `#content`).
- Test the injected role using the axe DevTools extension on the live published page.
- Note: Squarespace 7.1 templates are not fully editable at the HTML level; if you need full landmark control, consider migrating critical content to a supported custom-code block or contacting Squarespace support about their built-in accessibility roadmap.
How to fix landmark one main on Webflow
- Open your project in the Webflow Designer. In the Navigator panel, locate the element that wraps the main page content (usually a `div` named 'Main Content' or similar).
- Click that element to select it, then in the Element Settings panel (the gear icon on the right), find the 'Tag' dropdown and change it from `div` to `main`.
- Repeat this for every page template (Home, Collection, Product, CMS Template, etc.) in your project via the Pages panel.
- If you use a Symbol or Component for the page wrapper, update it once and it propagates everywhere.
- Publish your site and verify with the axe DevTools extension.
How to fix landmark one main on Adobe Commerce (Magento)
- In your custom theme directory (`app/design/frontend/<Vendor>/<theme>/`), open `Magento_Theme/templates/root.phtml` (or `page/html/main.phtml` for Magento 2's full-page layout).
- Find the `<div class="page-wrapper">` or equivalent wrapper around `<?= $block->getChildHtml('content') ?>`. Change its tag to `<main class="page-main" id="maincontent">` and update the closing tag.
- In `default.xml` or `cms_index_index.xml` layout files, ensure the `main` container uses the HTML tag `main` — e.g. `<container name="page.main" htmlTag="main" htmlId="maincontent" htmlClass="page-main">`.
- Clear the Magento cache: `bin/magento cache:clean` and `bin/magento cache:flush`.
- Verify on a storefront page with axe DevTools.
How to fix landmark one main on Magento Open Source
- Same process as Adobe Commerce: edit your theme's layout XML (`default.xml`) to set `htmlTag="main"` on the primary content container, and update the corresponding `.phtml` template.
- Run `bin/magento cache:clean` after changes.
- Verify with axe DevTools.
How to fix landmark one main on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → click 'Use FTP to add your theme' or edit theme files directly.
- Open your active theme's `templates/_partials/header.tpl` and `templates/index.tpl` (or the relevant page template).
- Locate the `<div id="main">` or `<div id="wrapper">` that wraps the main content block and change its tag to `<main id="main">` with the closing `</main>`.
- Save, clear the PrestaShop cache under Advanced Parameters → Performance → Clear cache, and verify with axe DevTools.
How to fix landmark one main on OpenCart
- Navigate to your OpenCart theme folder: `catalog/view/theme/<your-theme>/template/common/`.
- Open `header.twig` and `footer.twig` to find where the main content `<div>` opens and closes.
- In your layout file (often embedded in `index.twig` or passed from the controller), wrap the `{{ body }}` output in `<main id="main-content">…</main>`.
- Clear the OpenCart cache via Admin → Dashboard → the gear icon → Refresh, and verify with axe DevTools.
How to fix landmark one main on Headless / Custom (I build in code)
- In your root layout component or HTML shell (e.g. `_app.jsx`, `layout.tsx`, `default.html`), find the `<div>` wrapping your page-level content output.
- Replace that `<div>` with a `<main>` element (e.g. `<main id="main-content">`) or add `role="main"` if you must keep a `<div>` for styling reasons.
- Ensure only one `<main>` renders per page — if you have nested layout components, trace the full render tree to confirm no duplicates.
- Add a skip link in the topmost component: `<a href="#main-content" class="skip-link">Skip to main content</a>` pointing at the `id` on your `<main>`.
- Run `axe-core` in your CI pipeline (e.g. via `jest-axe` or Playwright/axe) to catch regressions automatically.
Does your site have this issue?
Run a free SEOLZ scan to find landmark one main — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Landmark one main?
Every web page should have exactly one "main" landmark — a special HTML tag (`<main>`) or ARIA role (`role="main"`) that marks the start of the primary content on the page. Think of it like a "skip to content" anchor that is built directly into the page structure. Screen readers and other assistive technologies use landmarks to let users jump between sections (navigation, header, main content, footer) without having to listen to everything in order. The `landmark-one-main` rule specifically checks that your page has one — and only one — such marker.
Why does landmark one main matter?
Without a main landmark, people who use screen readers (blind users, users with motor disabilities who rely on keyboard or switch navigation) must tab through every link, menu item, and banner on your page before they reach any product or content — on every single page load. This is a major usability barrier that can expose your store to accessibility lawsuits under the ADA (US), AODA (Canada), EAA (EU), and similar regulations that require conformance with WCAG 2.1. Fixing it is also a WCAG 2.1 Success Criterion 1.3.6 and 2.4.1 compliance item. Additionally, Google's crawlers and structured-data systems recognise landmark regions, so clear page structure can indirectly support crawl efficiency and rich-result eligibility.
How do I fix landmark one main?
Add a single `<main>` landmark element (or `role="main"`) to every page so assistive technologies can identify and navigate directly to the primary content.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI
- ARIA basics — MDN