Guide · Shopify themes
Shopify theme accessibility: Dawn, Horizon and the settings that matter
Last updated
General information, not legal advice. Laws differ by country; for your situation, ask a lawyer.
"Which Shopify theme is the most accessible?" is one of the first questions merchants ask once the European Accessibility Act (EAA) is on their radar. It is a reasonable question with an unsatisfying answer: the theme sets the starting point, but most barriers that shoppers meet come from how the theme is configured, filled and extended. This guide looks at Shopify's two reference themes, Dawn and Horizon, at the settings that most often create barriers in any theme, and at how to check a theme before you switch.
In short
- Theme Store themes must reach an average Lighthouse accessibility score of at least 90 with demo content. Your store with your content can score lower.
- Dawn and Horizon both allow zoom and keep slideshow autoplay off by default in their original code.
- Colour schemes, text over images, autoplay, icon links and app blocks are where most barriers appear.
- Before switching themes, test the candidate with your own colours, images and apps, not with the demo store.
- Automated checks find only part of the barriers. Add a keyboard and screen reader test.
What Shopify requires from themes
Shopify's Theme Store requirements say
that themes "must have a minimum average Lighthouse accessibility score of 90 across the theme's product, collection,
and home page, for both desktop and mobile". A separate accessibility section adds rules such as keyboard access to
every part of the page, a visible focus indicator, a focus order that follows the page structure, an
alt attribute on images, labels on form fields and tap targets of at least 24 × 24 CSS pixels.
That is a useful floor, with two limits. First, a Lighthouse score reflects automated checks only; a theme can score well and still be hard to use with a screen reader. Second, the requirement is tested on the theme with Shopify's benchmark content. Once you pick your colours, upload your images and add apps, you become a co-author of the result. Shopify's own help page on theme accessibility makes the same point: following its tips alone does not make a store accessible.
Dawn and Horizon: what the code shows
Dawn has been Shopify's free reference theme for years; Horizon is the newer one, built around blocks and a different design system. We read the public source of both on 25 October 2026 (Dawn 16.0.0, Horizon 4.3.0). This is what we found for the settings that most often cause trouble.
| Topic | Dawn | Horizon | What can still go wrong |
|---|---|---|---|
| Zoom (viewport tag) | Allows zoom (layout/theme.liquid) | Allows zoom (snippets/meta-tags.liquid) | A code edit, an app or an older theme adds maximum-scale=1 |
| Slideshow autoplay | Off by default; when on, shows a pause button | Off by default | Autoplay switched on without a way to pause |
| Icon links (cart, account, social) | Hidden text names in header and social icons | Cart and social icons named with aria-label | Custom Liquid blocks and app icons without a name |
| Colours | Colour schemes in theme settings | Colour schemes in theme settings | Light grey text, white on pastel, outline buttons |
| Moving text | Announcement rotation off by default | Marquee section stops when the system asks for reduced motion | Scrolling bars that cannot be paused |
In short, neither theme blocks zoom or forces motion out of the box, and both name their own icons. That is why, when a store on Dawn or Horizon fails one of these checks, the cause is usually a setting, an edit or an app rather than the theme itself. Theme code changes with every release, so check the version you actually run.
What the data shows, and what it cannot
In our study of 5,463 EU Shopify home pages (public HTTP Archive crawl of 1 September 2026, mobile view, home pages only, automated checks only), 94.2% of pages failed at least one automated check mapped to WCAG 2.1 A/AA. The most common findings were low colour contrast (74.6%), links without an accessible name (54.3%), images without alt text (36.0%), buttons without a name (18.8%) and blocked zoom (17.0%).
The dataset does not record which theme each store uses, so we cannot rank Dawn, Horizon or any other theme, and we do not try to. What the data does show is that the top findings sit in places a theme controls or exposes as settings: colour choices, icon links and buttons, the viewport tag and images in sections. It also shows that pages loading more third-party technologies failed more checks on average (2.69 failing audits with under 20 detected technologies, 4.12 with 40 or more). That is a correlation, not proof that any single app causes barriers.
The settings that create barriers in any theme
Colour schemes
Dawn and Horizon both use colour schemes, which you edit in the theme settings (Shopify Help: colors). Every section picks one scheme, so fixing a scheme fixes every section that uses it. Check each scheme for text on background, button text on button background and outline buttons. WCAG 1.4.3 asks for 4.5:1 for normal text and 3:1 for large text.
Text over images
Image banners and slideshows place text on a photo, so contrast changes across the image and between desktop and mobile crops. Dawn's image banner has an overlay opacity setting and a container option that puts the text on a solid background. Use them until the text reaches 4.5:1 everywhere, and put important text that is baked into an image, such as a discount, into the image's alt text as well.
Slideshow and moving content
Content that moves on its own for more than five seconds needs a way to pause it (WCAG 2.2.2). Both themes keep slideshow autoplay off by default. If you switch it on, make sure a pause control appears; if your theme has none, leave autoplay off. The same goes for rotating announcement bars and marquees.
Icon links and buttons
Search, account, cart, menu, close and social icons need a text name for screen readers. Reference themes provide one, but custom Liquid blocks, icon packs and app widgets often do not. A named icon link looks like this:
<a href="{{ routes.cart_url }}">
{{- 'icon-cart.svg' | inline_asset_content -}}
<span class="visually-hidden">Cart</span>
</a> Test with VoiceOver (Mac, iPhone) or NVDA (Windows): if you hear only "link", "button" or a file name, the name is missing (WCAG 4.1.2).
The viewport tag
If your store blocks pinch-zoom, search the code editor for viewport. A blocking tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> And without the block:
<meta name="viewport" content="width=device-width,initial-scale=1"> Duplicate the theme before any code edit. The rule behind this is WCAG 1.4.4.
Images in sections
Image banners, collection cards and image-with-text sections show images you upload. Their alt text comes from the file or product media, not from the theme. Fill it in for every image that carries information, and leave it empty only for purely decorative images. Our guide to the most common Shopify accessibility fixes shows where alt text lives in the admin and how to add it in bulk by CSV.
Focus and headings
Custom CSS such as outline: none removes the focus indicator that keyboard users rely on. Section
settings that let you choose a heading size do not change its level, so check that headings run in order (h1, h2,
h3) on each template.
How to check a theme before you switch
A theme switch is the cheapest moment to fix accessibility, because nothing is live yet. Shopify lets you add a theme to your library and preview it without publishing. Use that window:
- Configure it with your real content. Apply your colours, fonts, logo and a few real product and banner images. A demo store tells you little.
- Run an automated check on the home page, a collection, a product and the cart of the preview, for example with Lighthouse or the axe browser extension. Note the score and every failing rule.
- Do a keyboard pass. Without a mouse, go from the home page to a product, choose a variant, add to cart and open the cart. Watch for lost focus, hidden focus and traps in drawers and pop-ups.
- Do a short screen reader pass on the product page: are the price, variant selector, quantity field and add-to-cart button announced clearly?
- Add your apps one at a time and repeat the automated check after each. Apps bring their own code, and this is where a clean theme often picks up new findings.
- Compare with your current theme on the same pages, and write down the date, version and results. That record helps you later when you describe your store's accessibility in your accessibility statement.
If you want a quick first look at the store you run today, run the free check. Like every automated tool, it finds only part of the barriers, so the keyboard and screen reader passes above still matter.
How Testamur helps
Testamur is a Shopify app in development, built as an accessibility record rather than an overlay. It checks the theme at code level, shows whether a finding comes from the theme or an app and suggests the code change. Each scan is kept with its date, so you can show what you checked and fixed after a theme switch or update. The free check is available now.
Sources
- shopify.dev: Theme Store requirements (§ 6 Lighthouse, § 12 Accessibility)
- Shopify Help Center: theme accessibility
- Shopify Dawn on GitHub (version 16.0.0) and Shopify Horizon on GitHub (version 4.3.0)
- W3C: Understanding 1.4.3 Contrast (Minimum)
- W3C: Understanding 2.2.2 Pause, Stop, Hide
- W3C: Understanding 1.4.4 Resize Text
- Testamur: EU Shopify accessibility study 2026 (HTTP Archive, crawl of 1 September 2026)
Check your store free
See which barriers an automated check finds on your own Shopify store: the home page and, where your robots.txt allows, collection, product and legal pages, mapped to WCAG and EN 301 549. Free, result by email. Automated checks find part of the barriers, not all of them.
Check your store freeFrequently asked questions
Is Shopify's Dawn theme accessible?
Dawn ships with good foundations: its viewport tag allows zoom, its header and social icons carry hidden text names, and its slideshow does not rotate on its own unless you switch that on. That does not make a store built on Dawn accessible by itself. Your colours, images, sections, code edits and apps decide most of what shoppers experience.
Is Horizon more accessible than Dawn?
There is no reliable public comparison, and our study data does not record which theme a store uses. Both themes are maintained by Shopify, both allow zoom in their original code and both keep slideshow autoplay off by default. Compare the two on your own content with an automated check plus a keyboard and screen reader test before you switch.
Do Shopify Theme Store themes have to meet accessibility rules?
Yes, to be listed. Shopify requires an average Lighthouse accessibility score of at least 90 across the home, collection and product page, on desktop and mobile, plus rules on keyboard use, visible focus, labels and tap target size. These apply to the theme with its demo content, not to your configured store.
How do I stop my Shopify theme from blocking zoom?
Open the code editor, find the meta tag named viewport, usually in layout/theme.liquid or a meta-tags snippet, and remove maximum-scale=1 and user-scalable=no. Duplicate the theme first as a backup. Dawn and Horizon do not set these values in their original code.