How to fix region on Shopify
Wrap all visible page content inside HTML landmark elements (such as `<main>`, `<nav>`, `<header>`, `<footer>`, or ARIA `role` attributes) so screen-reader users can navigate your store efficiently.
Steps for Shopify
- From 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 template that wraps every page. Locate the outermost `<div>` or `<body>` content structure.
- Ensure the site logo/header area is wrapped in `<header role="banner">`, the primary nav in `<nav aria-label="Main menu">`, and the page body in `<main id="MainContent" role="main">`. Most modern Shopify themes (Dawn, Sense, Craft) already use these tags — verify they are present and that no promotional sections (e.g. announcement bars) sit outside them.
- Open individual section files under `sections/` (e.g. `sections/announcement-bar.liquid`, `sections/header.liquid`) and confirm their output HTML is nested inside the correct landmark in `theme.liquid`.
- For any custom sections that render standalone `<div>` blocks outside landmarks, either move them inside `<main>` in `theme.liquid` or add `role="region"` and `aria-label="[Section purpose]"` to the outermost `<div>` of that section file.
- Save changes, then visit your storefront and run axe DevTools (free Chrome/Firefox extension) to verify no 'region' violations remain.
<header role="banner">
<nav aria-label="Main menu"><!-- navigation links --></nav>
</header>
<main id="main-content" role="main">
<!-- all primary page content goes here -->
</main>
<aside role="complementary" aria-label="Promotions">
<!-- sidebar or supplementary content -->
</aside>
<footer role="contentinfo">
<!-- footer links and legal text -->
</footer>
<!-- If a div cannot become a semantic element: -->
<div role="region" aria-label="Customer Reviews">
<!-- review content -->
</div>What is region?
Landmarks are special HTML tags or ARIA attributes that divide a web page into named regions — like the main content area, navigation menu, page header, and footer. Screen readers and other assistive technologies use these regions as a table of contents, letting users jump directly to the part of the page they need. When content sits outside any landmark, assistive technology users cannot locate or skip to it. This is what the "region" accessibility rule checks: it flags any significant block of content that is not wrapped in one of these landmark containers.
Approximately 7 million Americans use screen readers, and landmarks are one of the most fundamental navigation tools they rely on. Without them, a screen-reader user must listen to your entire page linearly just to find the product listing or checkout button — a frustrating experience that causes them to leave. Beyond lost sales, WCAG 2.1 Success Criterion 1.3.6 (and the broader WCAG framework) requires content to be programmatically determinable; failure exposes your store to ADA/Section 508 accessibility complaints and litigation, which are rising year-on-year in the US and EU (EAA 2025). Search engines also use landmark structure to understand page hierarchy, so fixing this can modestly reinforce your on-page SEO signals as well.
See the complete Region guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ audit — we’ll find region and every other issue across your whole site.
Scan my site free