How to fix landmark one main on Adobe Commerce (Magento)

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.

Steps for 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.
Official Adobe Commerce (Magento) documentation ↗
<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>

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.

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.

See the complete Landmark one main guide for every platform and the full background.

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ audit — we’ll find landmark one main and every other issue across your whole site.

Scan my site free

Fix landmark one main on another platform