Shopify accessibility checklist (WCAG 2.2): 20 fixes store owners can make themselves
Most accessibility problems on small Shopify stores come from everyday choices: a product photo without alt text, a pale gray price, a pop-up that can’t be closed with a keyboard. You can fix those yourself in the Shopify admin and theme editor.
This checklist maps 20 of those fixes to the Web Content Accessibility Guidelines (WCAG) 2.2, the W3C standard that became a Recommendation in October 2023. Each item names the success criterion (SC) and its level. Level A and AA are what people usually mean by “WCAG compliance”.
Images and media
1. Give every product image alt text
Screen reader users hear the alt text instead of seeing the photo. Describe what a shopper needs to know: product, color, material, the view shown. In the admin: Products → open a product → click an image → Add alt text (Shopify’s instructions). SC 1.1.1 Non-text Content (A). See our guide to writing product alt text.
2. Add alt text to theme images, and skip purely decorative ones
Banners, collection images and “image with text” sections are set in the theme editor: Online Store → Themes → Customize, select the image, then edit its alt text (Shopify’s instructions). If an image is purely decorative, it should be ignored by screen readers; check what your theme outputs when the field is empty.
3. Don’t bake important text into images
A hero banner that says “40% off everything this weekend” as part of the picture can’t be resized, recolored or reliably read. Put the words in the theme’s heading and text fields instead. If you must use text in an image, repeat it in the alt text. SC 1.4.5 Images of Text (AA).
4. Caption your product videos
Videos with speech need captions for Deaf and hard-of-hearing shoppers. Use a host that supports caption files (YouTube and Vimeo both do) or have captions burned into the video. SC 1.2.2 Captions (Prerecorded) (A).
5. Stop slideshows from rotating on their own, or add a pause
Content that moves automatically for more than five seconds needs a way to pause, stop or hide it. The simplest fix: turn off auto-rotate in the slideshow section settings. SC 2.2.2 Pause, Stop, Hide (A).
Color and text
6. Make text contrast at least 4.5:1
Light gray body text, compare-at prices and footer links are the usual failures. Large text (24px, or about 18.7px bold) needs 3:1. Change colors under Customize → Theme settings → Colors. SC 1.4.3 Contrast (Minimum) (AA). Details in our color contrast guide.
7. Make buttons, input borders and icons visible (3:1)
A search box with a faint border or a cart icon in pale gray is hard to find. Borders and icons that identify controls need 3:1 against what’s next to them. SC 1.4.11 Non-text Contrast (AA).
8. Don’t use color alone to carry meaning
A sold-out size shown only by graying it, a sale price shown only in red, or links in body text that differ only by color can all be missed. Add text (“Sold out”), a strikethrough, or an underline. SC 1.4.1 Use of Color (A).
9. Check that pages work when zoomed
Zoom your browser to 200% and then 400%. Text should get bigger without being cut off, and at 400% the page should reflow into one column without sideways scrolling. SC 1.4.4 Resize Text and 1.4.10 Reflow (AA).
Structure and navigation
10. Use one H1 and headings in order
Screen reader users jump between headings to scan a page. Each page should have one main heading, and section headings shouldn’t skip levels just to get a font size. Shopify’s theme accessibility guidelines recommend the same. SC 1.3.1 Info and Relationships (A) and 2.4.6 Headings and Labels (AA).
11. Write link and button text that makes sense on its own
“Shop now” five times on a page, or “Click here”, tells a screen reader user nothing when links are listed out of context. Prefer “Shop summer dresses”. SC 2.4.4 Link Purpose (In Context) (A).
12. Give each page a descriptive title
The page title is the first thing announced. Edit it in the Search engine listing section of products, collections and pages. SC 2.4.2 Page Titled (A).
13. Check the page language
The lang attribute tells screen readers which pronunciation to use. Themes normally set it from your store language; an automated scan will tell you if it’s missing. SC 3.1.1 Language of Page (A).
14. Keep the “Skip to content” link working
Press Tab once on your home page. Most current themes show a skip link that jumps past the menu. If it’s missing or goes nowhere, keyboard users must tab through the whole menu on every page. SC 2.4.1 Bypass Blocks (A).
Keyboard and focus
15. Shop your own store with only a keyboard
Use Tab, Shift+Tab, Enter, Space and the arrow keys to open the menu, pick a variant, change quantity, add to cart, open the cart drawer and reach checkout. Anything you can’t do is a barrier. SC 2.1.1 Keyboard (A) and 2.1.2 No Keyboard Trap (A).
16. Make sure you can always see where focus is
You should see a clear outline on whatever is focused. New in WCAG 2.2: a sticky header, chat bubble or cookie banner must not completely hide the focused item. SC 2.4.7 Focus Visible (AA) and 2.4.11 Focus Not Obscured (Minimum) (AA).
17. Make tap targets big enough
New in WCAG 2.2: small controls such as quantity +/− buttons and color swatches should be at least 24 by 24 CSS pixels, or spaced so a 24px circle around each doesn’t overlap another. Shopify’s theme best practices go further and recommend 44 by 44 for primary controls. SC 2.5.8 Target Size (Minimum) (AA).
Forms, help and apps
18. Label every form field
Newsletter sign-ups, search boxes and contact forms need a visible label or at least a programmatic name; placeholder text that disappears when you type is not enough. SC 1.3.1 (A), 3.3.2 Labels or Instructions (A), 4.1.2 Name, Role, Value (A).
19. Make errors clear and help easy to find
If a form rejects input, say what went wrong in text. New in WCAG 2.2: don’t make people re-type information they already gave in the same process (3.3.7 Redundant Entry, A), don’t block pasting into password or code fields (3.3.8 Accessible Authentication (Minimum), AA), and keep your contact or help link in the same place on every page (3.2.6 Consistent Help, A). Shopify hosts and controls the checkout itself, so focus on your own forms and apps there.
20. Test your apps and pop-ups
Email pop-ups, review widgets, chat bubbles and upsell drawers are common sources of barriers because they are added on top of the theme. Check that each can be closed with the keyboard (Escape or a focusable close button with a name), doesn’t trap focus, and doesn’t cover content. If an app fails, ask the vendor or replace it. SC 2.1.2 (A), 4.1.2 (A).
Where to start
Start with what affects buying: product images (1), price and button contrast (6, 7), keyboard access to the cart (15) and form labels (18). Then run a scan for the technical misses and do the keyboard and zoom checks yourself; see what an automated scan can and can’t find.
Frequently asked questions
Does Shopify make my store accessible automatically?
No. Shopify’s own help center says that following its theme guidelines does not guarantee that a store is fully accessible. Your theme, apps, images and content all affect accessibility, and those are largely your choices.
Can I edit Shopify checkout for accessibility?
Mostly not. Shopify hosts and controls the checkout, so store owners generally cannot change its code. Focus on your theme, content and apps, test the checkout with a keyboard anyway, and report problems to Shopify.
Is this checklist enough for ADA compliance?
No checklist can promise that. It covers common, fixable barriers mapped to WCAG 2.2 Level A and AA, but it is not legal advice and it is not a full audit. For legal questions, talk to a lawyer.
Sources
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 and What’s new in WCAG 2.2.
- US Department of Justice, Guidance on Web Accessibility and the ADA (ada.gov, March 2022).
- Shopify Help Center, Accessibility for themes, Adding alt text to media, Adding alternative text to your theme images.
- Shopify developer docs, Accessibility best practices for Shopify themes.