The 5 most common accessibility problems on small Shopify stores (and how to fix them)
Published · All Reach Audit
In October 2026 we ran our automated scanner on the public pages of 56 business websites (mostly small online shops, boutiques and restaurants in New York, Florida and Illinois), including 26 Shopify stores. We looked at 4–10 pages per site. Here are the problems we saw most often on the Shopify stores, and how to fix each one.
About the data: these are automated results only (axe-core, WCAG 2.1 A/AA), counted once per site, excluding content inside embedded third-party frames such as YouTube players. Sites are anonymized. Automated tools catch only part of accessibility problems, so real-world numbers are higher.
| Problem | Stores affected | WCAG criterion |
|---|---|---|
| Low-contrast text | 77% (20 of 26) | 1.4.3 Contrast (Minimum) |
| Links with no readable text | 38% (10 of 26) | 2.4.4 Link Purpose / 4.1.2 Name, Role, Value |
| Images with no text description | 35% (9 of 26) | 1.1.1 Non-text Content |
| Form fields with no label | 19% (5 of 26) | 1.3.1 Info and Relationships / 4.1.2 |
| Hidden elements that keyboard users can still reach | 19% (5 of 26) | 4.1.2 Name, Role, Value |
These line up closely with the much larger WebAIM Million 2026 study of the top one million home pages. It found low-contrast text on 83.9% of home pages, missing alt text on 53.1%, missing form labels on 51% and empty links on 46.3%. It also found that Shopify home pages averaged 75.1 detected errors, versus 56.1 across all sites.
1. Low-contrast text
What it is: light gray text on white, or white text over a busy photo. It's hard to read for older customers, people with low vision, and anyone on a phone in sunlight.
How to fix it: in your theme settings (Theme settings → Colors), pick darker text colors. Normal text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. Watch the spots that are easy to miss: sale prices, "sold out" labels, placeholder text, footers and text on top of banner images.
/* before: #999 on white is about 2.8:1 */
.price--compare { color: #999999; }
/* after: #595959 on white is about 7:1 */
.price--compare { color: #595959; }2. Links with no readable text
What it is: icon-only links such as social media icons, the cart icon or a logo image without alt text. A screen reader announces just "link", so customers can't tell where it goes.
How to fix it: give each icon link an accessible name.
<a href="https://instagram.com/yourshop" aria-label="Instagram">
<svg aria-hidden="true" focusable="false">…</svg>
</a>3. Images with no text description
What it is: product photos, banners and logos with no alt text, so customers using screen readers miss what they show.
How to fix it: in Shopify admin, open a product, click the image and choose "Add alt text". Describe what matters to a shopper ("Hand-thrown blue ceramic mug, 12 oz"), not "image1.jpg". Purely decorative images should have empty alt text (alt="") so screen readers skip them. Check images added by apps (upsell widgets, review stars, trust badges) too.
4. Form fields with no label
What it is: the newsletter signup, search box, quantity field or product-option dropdown relies on placeholder text alone, so a screen reader can't say what the field is for.
How to fix it: connect a real label to every field. It can be visually hidden if your design needs it to be.
<label for="NewsletterEmail" class="visually-hidden">Email address</label>
<input id="NewsletterEmail" type="email" placeholder="Email address">5. Hidden elements keyboard users can still reach
What it is: a closed menu drawer, an off-screen cart or a duplicated carousel slide that's hidden from screen readers but still in the keyboard tab order. Keyboard users press Tab and land on things they can't see.
How to fix it: when content is hidden, take it out of the tab order too. The simplest modern approach is the inert attribute on closed drawers and inactive slides, or hidden/display: none when it's fully closed.
<div id="CartDrawer" aria-hidden="true" inert>…</div>What a scan can't tell you
Automated checks can't tell you whether your checkout works with a keyboard, whether alt text is actually helpful, or whether a pop-up traps focus. Deque, the company behind the open-source axe-core engine, reported that automated tests found about 57% of issues by volume in its first-time audits (Deque coverage report). The rest needed a person. Read more in what a website accessibility audit actually includes.
Sources
- WebAIM: The WebAIM Million, 2026 report
- Deque: The Automated Accessibility Coverage Report
- W3C: How to Meet WCAG 2.1 (Quick Reference)
Want to know where your site stands?
Send us your website address and we'll email you a free preliminary scan of a few public pages.