Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Content sits outside any landmark region on Shopify

Some blocks of content are not inside a landmark such as header, nav, main or footer. Screen-reader users navigate long ecommerce pages by landmark; content that belongs to none of them is effectively invisible to that shortcut and has to be found by reading everything.

Frequently litigated

Content outside landmarks is used to argue the page cannot be navigated efficiently by screen reader.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (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. Confirm the page structure is: <header> containing <nav>, then one <main>, then <footer>. Everything visible should sit inside one of them.
  2. In layout/theme.liquid, make sure the header section renders inside <header> and the footer inside <footer>.
  3. Announcement bars, cookie banners and promotional strips are the usual offenders — they are injected above the header, outside every landmark. Move them inside <header>, or give the wrapper role="region" with an aria-label.
  4. Cart drawers and modals that live at the end of <body> should be given role="dialog" and aria-label rather than being left bare.
  5. Do not solve this by wrapping the whole page in <main>; that defeats the purpose.

Where this usually lives

layout/theme.liquid, sections/announcement-bar.liquid, sections/header.liquid, sections/footer.liquid

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

<header>
  {% section 'announcement-bar' %}
  {% section 'header' %}
</header>

<main id="MainContent" tabindex="-1">{{ content_for_layout }}</main>

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

<!-- Standalone strip that cannot move: label it -->
<div role="region" aria-label="Site announcements">…</div>

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: medium. Rule id: region (axe-core).