Guide · Shopify
The 7 most common accessibility barriers on Shopify stores, and how to fix them
Last updated
General information, not legal advice. Laws differ by country; for your situation, ask a lawyer.
Most accessibility problems on Shopify stores are the same handful of issues, repeated across thousands of stores
and sitting in a few places: theme colour settings, icon links and buttons, image alt text and one line in
theme.liquid. This guide takes the seven findings that automated checks flag most
often on EU Shopify home pages and explains, for each one, who it affects, which WCAG criterion it maps to, how to
find it and where to fix it in Shopify.
The numbers come from our study of 5,463 EU Shopify home pages: Lighthouse (axe-core) results from the public HTTP Archive crawl of 1 September 2026, mobile view, home pages only, automated checks only. 94.2% of those pages failed at least one automated WCAG 2.1 A/AA check.
In short
- Colour contrast (74.6% of pages) and links without a name (54.3%) are by far the most common findings.
- Four of the seven are theme-level fixes: one change in a section or setting repairs every page using it.
- Missing alt text is mostly content you can fill in the Shopify admin, one by one or by CSV.
- Automated checks find only part of the barriers. Test with the keyboard and a screen reader as well.
The seven findings at a glance
| Finding (Lighthouse audit) | Share of pages | WCAG | Where to fix in Shopify |
|---|---|---|---|
| Low colour contrast (color-contrast) | 74.6% | 1.4.3 (AA) | Theme editor colour schemes; app widget styles |
| Links without a name (link-name) | 54.3% | 2.4.4, 4.1.2 (A) | Theme code: icon links, image links |
| Small tap targets (target-size) | 37.2% | 2.5.8 (WCAG 2.2 AA) | Theme CSS: icons, dots, swatches |
| Images without alt (image-alt) | 36.0% | 1.1.1 (A) | Product media, Content > Files, CSV |
| Skipped heading levels (heading-order) | 34.4% | best practice | Section headings in theme code |
| Buttons without a name (button-name) | 18.8% | 4.1.2 (A) | Theme code and app blocks |
| Zoom blocked (meta-viewport) | 17.0% | 1.4.4 (AA) | layout/theme.liquid |
Before you edit any code, duplicate your theme as a backup; Shopify's guide to editing theme code shows where the code editor is and recommends the same. To see which of these findings appear on your own store, you can run the free check or use the tools below.
1. Low colour contrast (74.6%)
Who it affects: people with low vision or colour vision deficiencies, older shoppers, and anyone on a phone in sunlight. Light grey prices and white text on pastel banners become hard to read.
The rule: WCAG 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Shopify's own theme accessibility best practices use the same thresholds.
Where it comes from: mostly colour choices. In Dawn and the other free themes released before Horizon 4.0.0, colours are set as colour schemes (background, text, button and so on) and applied to sections. Horizon 4.0.0 and later use colour palettes instead. Text placed over a hero image, and badges or pop-ups injected by apps, are other frequent sources.
How to find it: run Lighthouse in Chrome or the axe DevTools extension; both list each failing element. For a single colour pair, the Chrome DevTools colour picker shows the contrast ratio directly.
How to fix it in Shopify: in the theme editor, open theme settings, then Colors, and adjust the text or background colour of each scheme you use (Shopify's help page on colour settings describes the steps). Shopify does not warn you about poor contrast there, so check each scheme with a contrast tool. For text over images, add an overlay or move the text off the image. For app widgets, use the app's style settings or ask the developer.
2. Links without a name (54.3%)
Who it affects: screen reader users. A cart icon, a social media icon or a product image wrapped in a link with no text is announced as just "link", or as a long file name.
The rule: WCAG 2.4.4 (link purpose) and 4.1.2 (name, role, value).
Where it comes from: icon-only links in headers and footers, custom sections and links added by apps. Lighthouse's link-name audit names the element.
How to fix it: give every link text that screen readers can read. Dawn already does this for its
social icons: the icon is followed by a text label with the visually-hidden class, which Dawn defines
in assets/base.css. Copy that pattern in your own sections:
<a href="{{ settings.social_instagram_link }}" class="link list-social__link">
<span class="svg-wrapper">{{- 'icon-instagram.svg' | inline_asset_content -}}</span>
<span class="visually-hidden">Instagram</span>
</a>In a multilingual store, use a translation string for the label. For image links, give the image alt text that describes where the link goes.
3. Small tap targets (37.2%)
Who it affects: people with tremors or limited dexterity, and everyone on a small screen. Tiny slider dots, close buttons and colour swatches lead to mis-taps.
The rule: WCAG 2.5.8, new in WCAG 2.2, asks for targets of at least 24 by 24 CSS pixels or enough spacing around them. It is not part of WCAG 2.1, which EN 301 549 V3.2.1 (today's reference standard for the European Accessibility Act) is based on, so our study counts it separately. Shopify's best practices go further and recommend 44 by 44 pixels for primary controls.
How to fix it: in theme CSS, increase padding around small icons and links rather than the icon itself, and add space between adjacent targets such as footer links and swatches.
4. Images without alt text (36.0%)
Who it affects: screen reader users, who hear nothing (or a file name) where a product photo or promotional banner should be described.
The rule: WCAG
1.1.1. Purely decorative images should have an empty alt=""; the W3C's
alt decision tree helps you decide.
How to fix it in Shopify: this is mostly content work.
- Product images: in Products, open a product, click a media item and choose Add alt text (Shopify: Adding alt text to media).
- In bulk: export products as CSV, fill in the
Image alt textcolumn and import the file again. Shopify's CSV reference gives a maximum of 512 characters and recommends 125 or fewer. Test the import on a copy of a few products first. - Banners and section images: images uploaded under Content > Files can be given alt text there
(Uploading and managing
files). Liquid's
image_tagfilter uses the media's alt text by default, so themes that render images this way pick it up.
Write what the image shows that matters for buying ("Linen shirt in sage green, front view"), not keywords.
5. Skipped heading levels (34.4%)
Who it affects: screen reader users, many of whom jump between headings to scan a page. A jump from h1 straight to h4 suggests missing content.
The rule: axe treats heading order as a best practice, not a WCAG failure on its own; it relates to WCAG 1.3.1. Shopify's best practices ask for headings "used in sequence".
How to fix it: headings are usually chosen for their size. Check which heading tag each section outputs and use CSS classes for size instead, so the order stays h1, h2, h3 across the page.
6. Buttons without a name (18.8%)
Who it affects: screen reader and voice control users. An icon-only close, search, quantity or slider button is announced as "button" with no hint of what it does, and voice users cannot call it by name.
The rule: WCAG 4.1.2. Lighthouse's button-name audit flags each one.
How to fix it: add visually hidden text or an aria-label, and hide the icon itself
from assistive technology:
<button type="button" class="drawer__close" aria-label="Close cart">
<svg aria-hidden="true" focusable="false"><!-- icon --></svg>
</button>Buttons added by apps (chat launchers, wishlist hearts, review widgets) often cause this. If the app has no setting for it, report it to the developer.
7. Zoom blocked (17.0%)
Who it affects: people with low vision who pinch to zoom on their phone. If zoom is blocked, small text stays small.
The rule: WCAG 1.4.4.
The axe meta-viewport rule fails when the
viewport tag contains user-scalable=no or a maximum-scale below 2. In our study, .de
domains had the highest share (23.9%).
How to fix it: open layout/theme.liquid in the code editor and look for the viewport
meta tag. If it looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
remove maximum-scale and user-scalable. Dawn's own line is:
<meta name="viewport" content="width=device-width,initial-scale=1">
If the tag in theme.liquid is already clean but the check still fails, an app or a snippet may be
writing its own viewport tag. Search the theme code for "viewport".
Beyond the automated checks
Fixing these seven does not make a store accessible on its own. In a GOV.UK test, ten tools together found 71% of 143 barriers and the best single tool 41%. After the fixes, go through the buying journey with the keyboard only (can you see focus, open the menu, choose a variant, reach checkout?) and with a screen reader such as VoiceOver or NVDA. Look at product, collection and cart pages too, not only the home page. Our data also shows that pages loading more third-party technologies fail more checks, so review each app you add.
If you sell to EU consumers, the European Accessibility Act also asks you to publish information on how your service meets the requirements; see our guide to the accessibility statement for Shopify stores. Small businesses should check the microenterprise exemption, and brands outside the EU can read how the EAA applies to non-EU Shopify brands.
How Testamur helps
Testamur's free check runs these automated tests on your own store and maps each finding to WCAG and EN 301 549. The Shopify app, now in development, suggests code-level fixes, drafts your accessibility statement and keeps a dated record of what you checked, fixed and published. It is not an overlay, and like every automated tool it finds part of the barriers, not all of them.
Sources
- Testamur study: accessibility of 5,463 EU Shopify home pages (2026)
- Shopify: accessibility best practices for themes
- Shopify Help Center: colour settings
- Shopify Help Center: adding alt text to media
- Shopify Help Center: product CSV
- Dawn theme source code (GitHub)
- Chrome: Lighthouse accessibility scoring
- W3C: WCAG 2.1 and WCAG 2.2
- GOV.UK: what we found when we tested tools on the world's least-accessible webpage (2017)
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
What is the most common accessibility issue on Shopify stores?
Low colour contrast. In our analysis of 5,463 EU Shopify home pages (HTTP Archive crawl of 1 September 2026, mobile, automated checks only), 74.6% failed the colour-contrast check. Most of it comes from theme colour settings, such as light grey text, sale badges or text over images.
How do I add alt text to many Shopify product images at once?
Export your products as CSV, fill in the Image alt text column for each image row, and import the file again. Check the result on a few products afterwards. For single images, open the product in Products, click the media item and choose Add alt text. Images uploaded under Content > Files can get alt text there too.
Is Dawn an accessible theme?
Dawn's code follows many accessibility practices, for example a visually hidden text label on its social icons and a viewport tag that allows zoom. But your colour choices, images, app blocks and code edits decide what shoppers get. Test your own store rather than relying on the theme's reputation.
Can I check Shopify colour contrast without an app?
Yes. Chrome DevTools shows the contrast ratio of any text in its colour picker, and Lighthouse or the axe DevTools browser extension list every element that fails. Normal text needs at least 4.5:1 against its background, large text 3:1.
Do automated checks find all accessibility problems?
No. In a 2017 GOV.UK test, ten tools together found 71% of 143 deliberately placed barriers and the best single tool found 41%. Keyboard testing, a screen reader test of the buying journey and real users with disabilities find what tools miss.