How to make Shopify product images accessible
Product images do most of the selling on a Shopify store, so they're also where many accessibility issues hide. Customers who are blind or have low vision rely on text descriptions, customers with low vision may need to zoom in, and customers on slow connections may see text before images load. This guide covers the main things to get right with product images, galleries, videos and the text around them, and how to check your work.
If you only do one thing, add good alt text. Our separate guide to Shopify alt text covers writing it and adding it in bulk. This guide covers everything else.
1. Describe each image, and make each description different
WCAG 1.1.1 Non-text Content says images that carry information need a text alternative. For product photos, describe what a shopper needs to know: colour, material, pattern, fit and what this particular photo shows.
- Front, back and detail shots should each say what's different: "Back view showing the zip pocket" rather than repeating the product title five times.
- Lifestyle photos can describe the context briefly: "Model wearing the jacket open over a grey hoodie".
- Shopify recommends keeping alt text to 125 characters or fewer (Shopify Help Center: Adding alt text to media).
2. Mark decorative images as decorative
Background textures, dividers and images that only repeat what's already in the text don't need a description. Leaving their alt text empty tells screen readers to skip them, which saves customers from hearing meaningless file names. The W3C's alt decision tree helps when you're not sure.
3. Don't put important text only inside images
Banners, size charts, "what's in the box" graphics and ingredient lists are often uploaded as pictures. Text inside an image can't be read by a screen reader, can't be translated, and goes blurry when zoomed. WCAG 1.4.5 Images of Text asks you to use real text where you can.
- Put size charts in a table in the product description, or on a page you link to.
- Put offers like "20% off" in the banner's heading or text fields in the theme editor, rather than baking them into the picture.
- If text has to stay in an image, repeat it in the alt text or in the page text nearby.
4. Colour swatches and variant images
- Name the colour in text. A swatch that only shows a colour is hard to use for customers who are colour blind or using a screen reader. Make sure the variant name ("Forest green") is shown or announced, not just the colour. See WCAG 1.4.1 Use of Color.
- Show out-of-stock with more than colour. A greyed-out swatch should also say "Sold out" in text.
- Check swatch contrast. Very light swatches, like white or cream, can disappear against a white background. A visible border helps. Non-text elements needed to understand the page should have a contrast of at least 3:1 (WCAG 1.4.11 Non-text Contrast).
5. Galleries, zoom and sliders
Product galleries are part of your theme, so how accessible they are depends on the theme. Test yours:
- Use the Tab key to reach the gallery. Can you move between images and open the zoom or lightbox with the keyboard?
- Can you close the lightbox with the Escape key, and does focus go back to where you were?
- Do the previous and next buttons have names a screen reader can announce, like "Next image", rather than just an arrow?
- If thumbnails auto-advance, is there a way to pause them? See WCAG 2.2.2 Pause, Stop, Hide.
If any of these fail, check whether your theme has a newer version, or ask the theme developer. Shopify's free themes are regularly updated with accessibility improvements.
6. Product videos and 3D models
- Captions for speech. If a product video includes talking, add captions. See WCAG 1.2.2 Captions (Prerecorded).
- Describe important visuals. If a video shows how something works without saying it, add a short text summary on the page. See WCAG 1.2.3 Audio Description or Media Alternative.
- Avoid autoplaying sound. Videos that start playing with sound make it hard for screen reader users to hear their screen reader.
- Give 3D models and videos alt text too. In the Shopify admin, videos and 3D models can have alt text, just like images (Shopify Help Center: Adding alt text to media).
7. Image file names and performance
File names like IMG_4821.jpg don't help anyone, and some themes or apps fall back to them when alt text is missing. Renaming files before upload, for example navy-wool-beanie-front.jpg, is a small help for both search and accessibility. Shopify serves images in modern formats and sizes automatically, but very large original uploads can still slow down pages on mobile, so resize huge photos before you upload them.
How to check your product pages
- Run an automated check. Run a free Quick check of your home page, or use a browser extension like axe DevTools or WAVE on a product page. These flag images with no alt attribute, low contrast and unnamed buttons.
- Listen to a product page. Turn on VoiceOver (Mac and iPhone), Narrator (Windows) or TalkBack (Android) and move through a product page. Can you tell what the product looks like and which variant is selected?
- Zoom to 200%. Check that the gallery, swatches and Add to cart button still work.
Automated checks can tell you an image has no alt text, but not whether the description is accurate. That part needs a person who knows the product.
This guide is general information, not legal advice. Following it helps make your product pages easier to use, but no checklist or tool can guarantee that a store meets every accessibility requirement or law.