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)

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.