SEOLZ

Landmark one main

Quick win

Found on 21% of audited stores.

Add a single `<main>` landmark element (or `role="main"`) to every page so that screen-reader users and assistive technologies can skip directly to the primary content.

What it is

Every web page should have one clearly marked "main content" region — the part of the page that is unique to that page, as opposed to the header, navigation, and footer that repeat everywhere. In HTML this is done with the `<main>` element (or by adding `role="main"` to a wrapper `<div>`). This marker is called a **landmark**. Screen readers and keyboard-only users rely on landmarks to jump around the page without having to tab through every single link and menu item first. The `landmark-one-main` rule fails when a page has zero `<main>` elements, or when it has more than one.

Why it matters

Without a main landmark, visually impaired shoppers using a screen reader (NVDA, JAWS, VoiceOver) cannot use the "skip to main content" shortcut — they are forced to listen to every navigation link on every page before reaching your products or checkout. This is a WCAG 2.1 Level A failure (Success Criterion 1.3.6 / ARIA Landmark Regions), meaning it carries legal accessibility risk in jurisdictions with web-accessibility laws (ADA, EN 301 549, EAA). Beyond compliance, a poor experience for assistive-technology users directly hurts conversions and brand trust. Fixing it is typically a one-line HTML change.

How to fix it

  1. Audit your page template/theme files to find the outermost wrapper `<div>` (or equivalent) that contains only the unique page content — not the header, navigation bar, or footer.
  2. Replace that wrapper's opening tag with `<main>` (and its closing tag with `</main>`), OR add `role="main"` and `id="main-content"` to the existing `<div>` if changing the tag would break your layout.
  3. Ensure there is exactly ONE `<main>` / `role="main"` element per page — remove or convert any duplicates.
  4. Add a visible or visually-hidden 'Skip to main content' anchor link at the very top of `<body>` pointing to `#main-content` so keyboard users can bypass repeated navigation (e.g., `<a href="#main-content" class="skip-link">Skip to main content</a>`).
  5. Save and publish, then re-test using a browser accessibility checker (axe DevTools browser extension or Chrome Lighthouse > Accessibility) to confirm the `landmark-one-main` rule now passes.
  6. Verify with a screen reader (VoiceOver on Mac/iOS, NVDA on Windows) that pressing the 'Regions' shortcut (e.g., R in NVDA browse mode) navigates directly to the main content area.
<main id="main-content" role="main">
  <!-- All unique page content goes here -->
</main>

<!-- Skip link (add just after <body> opens): -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
}
</style>

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark one main on Shopify
  1. Go to Online Store → Themes → Actions → Edit code.
  2. Open 'Layout' → `theme.liquid` (this is the master template wrapping every page).
  3. Locate the opening `<div>` (often `<div id="MainContent">` or similar) that wraps the `{{ content_for_layout }}` tag — this holds the unique page content.
  4. Change it to `<main id="main-content" role="main">` … `</main>`. If the `<div>` has important CSS classes, keep them: `<main id="main-content" role="main" class="your-existing-classes">`.
  5. Also add a skip link as the very first child of `<body>`: `<a class="skip-to-main visually-hidden" href="#main-content">Skip to main content</a>` and add CSS to make it visible on focus.
  6. Click Save, then test with the axe browser extension on any storefront page.
Full Shopify guide →Official Shopify docs ↗
How to fix landmark one main on WooCommerce
  1. In WordPress Admin go to Appearance → Theme File Editor (or use a local FTP/SSH client). If your theme is a block theme, use Appearance → Editor instead.
  2. Open `header.php` (classic theme) — find the closing `</header>` tag and add `<main id="main-content" role="main">` immediately after it.
  3. Open `footer.php` — add the corresponding `</main>` tag immediately before the opening `<footer>` tag.
  4. Check `page.php`, `single.php`, `archive.php`, and `woocommerce/` templates to ensure none of them wrap content in a second `<main>` tag (some themes already include one — remove the duplicate).
  5. Add the skip link in `header.php` just after `<body <?php body_class(); ?>>`: `<a class="skip-link screen-reader-text" href="#main-content">Skip to main content</a>`.
  6. Save, then run Lighthouse Accessibility audit in Chrome DevTools to verify the fix.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix landmark one main on BigCommerce
  1. Go to Storefront → Themes → Advanced → Edit Theme Files (Stencil CLI is preferred for version control).
  2. Open `templates/layout/base.html` — this is the master layout.
  3. Find the main content wrapper (usually `<div id="main-content">` or a `{{{snippet.page_wrapper}}}`); change it to `<main id="main-content" role="main">` … `</main>`.
  4. Add a skip link immediately after the opening `<body>` tag: `<a href="#main-content" class="skip-nav">Skip to main content</a>`.
  5. Push changes via Stencil CLI (`stencil push`) or save in the theme editor, then validate with the axe DevTools Chrome extension on your live storefront.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix landmark one main on Wix
  1. Wix generates HTML automatically; you cannot edit raw HTML directly in Wix Classic Editor.
  2. In the Wix Editor, ensure your page structure uses a dedicated 'Page Content' section below the Header and above the Footer — Wix maps this to a `<main>` landmark in modern Wix rendering.
  3. Go to Settings (gear icon) → Accessibility and enable 'Skip to Content' — this adds a skip link and helps Wix correctly identify the main region.
  4. If you use Wix Studio, open the page, click on the main section, open the Inspector panel, and set the HTML tag to `<main>` under 'Advanced' → 'Semantic HTML Tag'.
  5. Re-publish the site and test with the axe browser extension.
Full Wix guide →Official Wix docs ↗
How to fix landmark one main on Wix Studio
  1. Open the page in Wix Studio Editor.
  2. Click the primary content section (the body area between Header and Footer) to select it.
  3. In the right-hand Inspector panel, scroll to 'Advanced' → 'Semantic HTML Tag' and select `<main>` from the dropdown.
  4. Optionally set the element's ID to `main-content` for the skip link target.
  5. Ensure no other section on the page is also tagged as `<main>`.
  6. Publish and verify with the axe DevTools browser extension.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix landmark one main on Squarespace
  1. Squarespace 7.1 templates already wrap page content in a `<main>` element in most themes — verify by running axe DevTools on your live site first.
  2. If the landmark is missing, go to Pages → select the page → click the gear icon → Advanced → and in the 'Page Header Code Injection' or 'Code Injection' (Settings → Advanced → Code Injection) add a `<style>` note that Squarespace does not allow direct HTML template editing.
  3. As a workaround, use a Code Block (Insert Point → +) at the very top of page content and insert `<a href="#main-content" class="skip-link" style="position:absolute;left:-9999px;">Skip to main content</a>` plus `<span id="main-content"></span>`.
  4. For deeper template changes, switch to Developer Mode (Settings → Advanced → Developer Mode) and edit `base.region` or the relevant `.region` file to wrap content in `<main id="main-content">`.
  5. Re-publish and re-test with axe DevTools.
Full Squarespace guide →Official Squarespace docs ↗
How to fix landmark one main on Webflow
  1. Open your project in the Webflow Designer.
  2. In the Navigator panel, find the top-level `<div>` or `<Section>` that contains your page-unique content (below the Navbar component, above the Footer component).
  3. Click the element, then in the right-hand Settings panel (the gear icon) change the HTML Tag from `div` to `main`.
  4. Set the element ID to `main-content` (Settings panel → ID field) so a skip link can target it.
  5. Add a Text Link element as the very first child of `<body>` (before the Navbar): set its URL to `#main-content`, give it a class `skip-link`, and use Webflow's visibility settings (display: none / show on focus) to style it as a visually-hidden skip link.
  6. Publish and confirm with the axe browser extension.
Full Webflow guide →Official Webflow docs ↗
How to fix landmark one main on Adobe Commerce (Magento)
  1. In your custom or child theme, locate `Magento_Theme/templates/root.phtml` (Magento 2) or `app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml`.
  2. Find the main content wrapper — typically `<div id="maincontent" class="page-main">` — and change it to `<main id="main-content" role="main" class="page-main">` (keep existing classes for CSS compatibility).
  3. Also update the matching closing tag to `</main>`.
  4. In the same file, add a skip link just after `<body>`: `<a class="action skip" href="#main-content"><span>Skip to main content</span></a>` (Magento's blank theme includes CSS for `.action.skip` to be visually hidden until focused).
  5. Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy`, then verify with the axe extension.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix landmark one main on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template path and process are identical for Magento Open Source 2.x.
  2. If you are on Magento 1.x, edit `app/design/frontend/<package>/<theme>/template/page/html/wrapper.phtml` and wrap the main content `<div>` with `<main role="main" id="main-content">` … `</main>`.
  3. Clear the Magento cache after saving.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix landmark one main on PrestaShop
  1. In your theme folder (typically `themes/<your-theme>/`), open `templates/layouts/layout-full-width.tpl` (and any other layout `.tpl` files you use).
  2. Find the content wrapper — often `<div id="main">` — and change it to `<main id="main-content" role="main">`.
  3. Update the closing tag accordingly.
  4. Add a skip link in `templates/_partials/header.tpl` just after the `<body>` tag: `<a class="sr-only sr-only-focusable" href="#main-content">Skip to main content</a>`.
  5. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and re-test.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix landmark one main on OpenCart
  1. Open your theme's main layout file, typically `catalog/view/theme/<your-theme>/template/common/header.tpl` (OpenCart 2.x) or `header.twig` (OpenCart 3.x+).
  2. At the bottom of the header template (just before the main content inclusion), add `<main id="main-content" role="main">`.
  3. Open `catalog/view/theme/<your-theme>/template/common/footer.tpl` (or `.twig`) and add the closing `</main>` tag near the top, before the `<footer>` tag.
  4. Add a skip link as the first element after `<body>` in the header template.
  5. Refresh the OpenCart cache and verify with axe DevTools.
Full OpenCart guide →Official OpenCart docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Landmark one main?

Every web page should have one clearly marked "main content" region — the part of the page that is unique to that page, as opposed to the header, navigation, and footer that repeat everywhere. In HTML this is done with the `<main>` element (or by adding `role="main"` to a wrapper `<div>`). This marker is called a **landmark**. Screen readers and keyboard-only users rely on landmarks to jump around the page without having to tab through every single link and menu item first. The `landmark-one-main` rule fails when a page has zero `<main>` elements, or when it has more than one.

Why does landmark one main matter?

Without a main landmark, visually impaired shoppers using a screen reader (NVDA, JAWS, VoiceOver) cannot use the "skip to main content" shortcut — they are forced to listen to every navigation link on every page before reaching your products or checkout. This is a WCAG 2.1 Level A failure (Success Criterion 1.3.6 / ARIA Landmark Regions), meaning it carries legal accessibility risk in jurisdictions with web-accessibility laws (ADA, EN 301 549, EAA). Beyond compliance, a poor experience for assistive-technology users directly hurts conversions and brand trust. Fixing it is typically a one-line HTML change.

How do I fix landmark one main?

Add a single `<main>` landmark element (or `role="main"`) to every page so that screen-reader users and assistive technologies can skip directly to the primary content.

Authoritative references

Related Accessibility (WCAG) issues