DEV Community

AccessoraX
AccessoraX

Posted on

How to Add Alt Text to Shopify Product Images

Missing alt text on product images is one of the most common accessibility violations on Shopify stores and one of the easiest to fix. Learn the complete guide to adding descriptive alt text for better accessibility, SEO, and WCAG compliance.

Missing alt text on product images is one of the most common accessibility violations on Shopify stores and one of the easiest to fix. Alt text (alternative text) describes images for people who can't see them, including blind users who rely on screen readers, users with images turned off to save data, and search engines that can't "see" images.

In this guide, you'll learn exactly how to add alt text to Shopify product images, what makes good alt text, common mistakes to avoid, and how proper alt text improves both accessibility and SEO.

What is Alt Text and Why Does It Matter?
Alt text is HTML code that describes what an image shows. When someone using a screen reader (like VoiceOver or NVDA) encounters an image, their screen reader reads the alt text aloud, allowing them to understand what the image depicts.

Navy blue organic cotton t-shirt, front view
When a screen reader encounters this image, it announces: "Image: Navy blue organic cotton t-shirt, front view."

Without alt text, the screen reader would say: "Image" or "blue-tshirt.jpg" providing no useful information about the product.

Alt text serves three critical purposes:
Accessibility: Blind and visually impaired customers can't make informed purchase decisions without knowing what products look like. Descriptive alt text provides equivalent information.
SEO: Google can't "see" images. Alt text tells Google what your product images show, helping them appear in Google Image Search and improving overall page relevance for text searches.
Fallback Content: If images fail to load (slow connection, server issues, images disabled), alt text displays in place of the image, ensuring users still understand what should be there.
WCAG Requirements for Alt Text
The Web Content Accessibility Guidelines (WCAG 2.1) require alt text under Success Criterion 1.1.1 (Non-text Content, Level A). This is the most basic accessibility requirement that every image must have a text alternative.

For Shopify merchants concerned about ADA compliance, proper alt text is non-negotiable. Courts use WCAG 2.1 Level AA as the standard for determining ADA compliance, and missing alt text is cited in virtually every accessibility lawsuit against e-commerce sites.

Learn more about achieving full WCAG 2.1 AA compliance for your Shopify store →

How to Add Alt Text in Shopify: Step by Step
Method 1: Add Alt Text When Uploading Product Images
The easiest time to add alt text is when you first upload product images.

Steps:

In Shopify Admin: Go to Products → [Select Product]
Click "Add media" or click on an existing image
After the image uploads, look for the "Alt text" field below the image
Click "Add alt text" (or "Edit alt text" if text already exists)
Write descriptive alt text (more on this below)
Click "Save alt text"
Click "Save" at the top of the product page to save changes
Important:
Changes won't appear on your live store until you click the main "Save" button at the top of the product editing page.

Method 2: Add Alt Text to Existing Product Images
If you have hundreds of products already uploaded without alt text, here's how to add it efficiently:

In Shopify Admin: Products → All Products
Click on a product to edit it
Scroll to the "Media" section (where product images appear)
Click the image you want to add alt text to
In the image preview panel, click "Add alt text"
Write descriptive alt text
Click "Save alt text"
Repeat for all images on the product
Click "Save" at the top
Tip: Focus on your top selling products first. If you have 500 products, start with the 50 that generate 80% of your revenue. You can add alt text to the rest over time.

What Makes Good Alt Text? (With Examples)
Good alt text is descriptive, specific, and concise. It should convey the same information a sighted user gets from the image.

Example 1: Clothing Product
Product: Women's black leather jacket

❌ Bad alt text:
"jacket" (too vague)
"black-leather-jacket-womens.jpg" (filename, not description)
"Product image" (generic, unhelpful)
"Women's Black Leather Jacket" (just copies product title)

✅ Good alt text:
"Black leather motorcycle jacket with silver zippers, front view"
"Black leather jacket back view showing quilted shoulder detail"
"Model wearing black leather jacket, styled with white t-shirt and jeans"

Why it's good: Describes what THIS specific image shows, including relevant details (zippers, quilting, styling) that help customers understand the product.

Example 2: Home Goods Product
Product: Ceramic coffee mug

❌ Bad alt text:
"mug"
"Handmade Ceramic Coffee Mug" (copies title)
"ceramic mug product photo"

✅ Good alt text:
"White ceramic coffee mug with blue speckled glaze, side view"
"Coffee mug interior showing blue speckled pattern and white rim"
"Hand holding white ceramic mug, showing size comparison"

Alt Text Writing Guidelines

DO:
✅ Describe what the image shows, not what it is
✅ Be specific about product details
✅ Mention colors, textures, patterns, and key features
✅ Indicate image perspective (front view, side view, etc.)
✅ Keep it concise (under 125 characters when possible)
✅ Include relevant context for lifestyle/styled images

DON'T:
❌ Start with "Image of" or "Picture of" (screen readers already announce "Image")
❌ Stuff keywords for SEO
❌ Use the same alt text for every product image
❌ Leave decorative images with alt text
❌ Include prices or promotional text

How Alt Text Improves SEO
Google Image Search drives significant e-commerce traffic especially for visually driven products like fashion, home decor, and beauty.

How alt text helps SEO:
Google Image Search Rankings: Alt text tells Google what your images show, helping them rank in Image Search for relevant queries like "navy blue midi dress" or "handmade ceramic mug."
Overall Page Relevance: Alt text contributes to Google's understanding of your page's topic.
User Experience Signals: Pages with proper alt text provide better accessibility, which correlates with lower bounce rates and higher engagement withpositive ranking signals.
Mobile Performance: Slow mobile connections often don't load images. Alt text ensures mobile users still understand your products.
Common Alt Text Mistakes on Shopify Stores
Mistake 1: Using Filenames as Alt Text
Bad: alt="IMG_4829.jpg" or alt="product-blue-tshirt-front.jpg"

Fix: Write actual descriptions: alt="Blue organic cotton t-shirt, front view"

Mistake 2: Copying Product Titles as Alt Text
Product titles are visible on the page. Alt text should describe what the IMAGE shows, not repeat the title.

Bad: Every image has alt="Women's Black Leather Jacket"

Fix: Each image gets unique alt text describing its specific view or detail.

Mistake 3: Missing Alt Text Entirely
The worst mistake. Many Shopify themes don't enforce alt text, leaving images with alt="" or no alt attribute.

How to check: Right-click an image → Inspect → Look for alt="" or missing alt attribute

Fix: Add alt text to every product image, following the guidelines above.

Need Help with Full Accessibility Compliance?
Alt text is just one piece of WCAG 2.1 AA compliance. Your Shopify store also needs proper heading structure, keyboard navigation, color contrast, form labels, and dozens of other technical requirements to be genuinely accessible and legally compliant.

Explore Our WCAG 2.1 AA Compliance Services →
Or request a free accessibility audit to see exactly what accessibility barriers exist on your store.

Conclusion
Adding alt text to Shopify product images is one of the simplest and most impactful accessibility improvements you can make. It helps blind customers shop independently, improves your SEO and Google Image Search rankings, and protects you from accessibility lawsuits and all while requiring minimal time investment.

Key Takeaways:
✅ Add alt text when uploading product images (saves time later)
✅ Write descriptive, specific alt text for each unique image
✅ Keep it concise (under 125 characters when possible)
✅ Avoid keyword stuffing and write for humans
✅ Audit existing products and add missing alt text to top sellers first
✅ Make alt text part of your product publishing workflow

Request a free accessibility audit to discover all the accessibility issues on your Shopify store, not just missing alt text.

Top comments (0)