Shopify accessibility checklist: 10 issues to check in your store
Many accessibility barriers in Shopify stores are not exotic. They usually sit in the theme or in an installed app. Here are ten to check first.
1. Product images without alt text
Screen readers have nothing to read out, so blind customers don't know what a photo shows. Fix it in the product's media settings or in bulk; see our guide How to add alt text to Shopify product images in bulk.
2. Icon-only links
Social media icons or a cart icon can be links without text. A screen reader announces just "link". Add an aria-label to the link in your theme code, for example <a href="…" aria-label="Instagram">.
3. Icon-only buttons
Menu, search, close and cart buttons often contain only an icon. Sticky add-to-cart buttons on mobile are a frequent example; we found one without text in our own test store. The fix is the same as for links; see How to fix "Buttons must have discernible text".
4. Low colour contrast
Light grey text on white or white text on a pastel button is hard to read for many people. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Adjust colours under Online Store › Themes › Customize › Theme settings › Colors.
5. Zoom is disabled
Some themes add maximum-scale=1 or user-scalable=no to the viewport meta tag in theme.liquid. That stops customers from zooming in on their phone. Remove both values.
6. Form fields without a label
Newsletter sign-ups and search fields often show only placeholder text. Once someone starts typing, the hint is gone, and screen readers may not announce it at all. Add a visible label or at least an aria-label.
7. Missing page language
The <html> tag needs a lang attribute so screen readers use the right pronunciation. In theme.liquid it should look like <html lang="{{ request.locale.iso_code }}">. Most current themes already do this.
8. Sliders and carousels you can't reach with the keyboard
Scrolling product sliders often can't be reached with the Tab key. Give the scrolling container tabindex="0" and an aria-label, or pick a theme setting without a scrolling slider. Avoid autoplay, or add a visible pause button.
9. Embedded frames without a title
Videos, maps and review widgets are often embedded as iframes. Each needs a title that says what it contains, for example title="Customer reviews". If an app adds the frame, ask the app's support.
10. Tap targets that are too small
Tiny icons placed close together are hard to hit on a phone. WCAG 2.2 (success criterion 2.5.8, new in version 2.2) asks for targets of at least 24 by 24 CSS pixels or enough space around them. Increase icon size or spacing in the theme settings or CSS.
What automated checks can't tell you
Automated tools find many technical issues, but not all of them. They can't judge whether an alt text actually describes the image, whether the keyboard order makes sense or whether a checkout step is understandable. Two quick manual tests help:
- Keyboard test: put your mouse away and go through your store with Tab, Shift+Tab and Enter. Can you add a product to the cart and reach checkout? Can you always see where you are?
- Screen reader test: turn on VoiceOver (iPhone, Mac) or NVDA (Windows, free) and listen to one product page.
Sources
This article is general information, not legal advice. Automated tools, including Valence, find only part of all accessibility barriers and cannot certify conformance with the ADA, WCAG, the European Accessibility Act or any other standard.