Shopify · EAA

Shopify accessibility: a practical EAA checklist

Shopify's checkout is maintained by Shopify, but your theme, apps and content are your responsibility. Here's where most Shopify stores fail and how to fix each one.

1. Product image alt text

Products → open a product → click each image → Add alt text. Describe what matters to a buyer: "Navy merino crew-neck jumper, front view". Collection and banner images are set in the theme editor, in each image block.

2. Colour contrast

Online Store → Themes → Customize → Theme settings → Colors. Check text, buttons, sale badges and "compare at" prices against a 4.5:1 contrast ratio. Light grey text and pastel buttons with white text are the usual culprits.

3. Icon buttons without names

Cart, search, account and menu icons, slider arrows and social links often have no text. In Edit code, find the header and footer sections and add aria-label="Cart" (etc.) to those <a> and <button> elements.

4. Unlabelled form fields

Newsletter footers and search boxes frequently rely on placeholder text. Add a <label class="visually-hidden"> for each field.

5. Apps and pop-ups

Review, upsell and pop-up apps inject their own code. Test that pop-ups can be closed with Escape and that focus doesn't get lost. If an app fails, ask the vendor for an accessible version or replace it.

6. Theme choice

Recent Online Store 2.0 themes from the Shopify Theme Store (e.g. Dawn-based themes) start from a much better baseline than older or heavily customised themes.

7. Accessibility statement

Create a page (Online Store → Pages) with your accessibility statement and link it from the footer menu. Our full report generates one for you.