Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Page has no main landmark on Shopify

The page has no <main> region, or has more than one. Screen-reader users jump straight to "main" to skip the header and navigation; without it they must tab through the entire menu on every single page load.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)
  • Does not meet 2.4.1 Bypass Blocks (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Open layout/theme.liquid. Find where {{ content_for_layout }} is output.
  2. Wrap it in exactly one <main id="MainContent" role="main" tabindex="-1">…</main>.
  3. Exactly one per page. If a section template also emits <main>, remove the inner one.
  4. The id must match the target of the skip link (see the "bypass" finding) — Dawn uses #MainContent.
  5. Header, nav and footer must sit outside <main>.

Where this usually lives

layout/theme.liquid, around {{ content_for_layout }}

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<body>
  {% section 'header' %}

  <main id="MainContent" class="content-for-layout" role="main" tabindex="-1">
    {{ content_for_layout }}
  </main>

  {% section 'footer' %}
</body>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: landmark-one-main (axe-core).