Shopify accessibility fixes for store owners
Before you start
Work through the fixes in the order below. They are the issues automated scans find most often on small-business sites and the ones that most often block visitors who use screen readers, keyboards or zoom.
1. Product image alt text
Products → choose product → click an image → Add alt text. Describe the product and the variant shown (“Navy wool beanie, folded cuff”). Do the same in Content → Files for banners.
2. Contrast
Online Store → Themes → Customize → Theme settings → Colors. Check sale badges, buttons and text over hero images.
3. Icon buttons (cart, search, menu)
In Online Store → Themes → Edit code, find the icon button snippet and add an accessible name:
<button type="button" aria-label="Open cart">{% render 'icon-cart' %}</button>
4. Newsletter and contact form labels
<label for="NewsletterEmail" class="visually-hidden">Email address</label> <input id="NewsletterEmail" type="email" name="contact[email]">
5. Page language
In layout/theme.liquid make sure the html tag has: lang="{{ request.locale.iso_code }}"
6. Apps and overlays
“One-click” overlay widgets don't fix the underlying code and can interfere with screen readers. Fix the theme and content directly instead.
Related guides
- How to write alt text: 20 examples for small-business sites
- Colour contrast for websites: ratios, tools and quick fixes
- How to make your contact form accessible
- How to test your website with only a keyboard (5-minute check)
Check your own site
Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.