Accessible Product Images and Alt Text for E-Commerce: A Practical Guide
Accessible Product Images and Alt Text for E-Commerce
Product images are the primary way customers evaluate what they’re buying online. Color, fit, material, size, style — for most products, the image communicates what text alone can’t. For customers who are blind or have low vision, that information needs to come through alt text instead. When accessible product images and alt text for e-commerce are done well, every customer gets the information they need to make a purchase decision. When they’re done poorly — or not at all — screen reader users are shopping blind in a different sense entirely.
Here’s a practical guide to writing product alt text that actually works.
Why Product Alt Text Matters More Than You Think
WCAG 1.1.1 requires that every non-decorative image has a text alternative that conveys the same purpose. For e-commerce, “the same purpose” means something very specific: the alt text needs to communicate whatever a sighted customer would learn from looking at the image that helps them decide whether to buy.
Missing or poor alt text doesn’t just create an accessibility failure — it removes a screen reader user’s ability to comparison shop, evaluate products, or make confident purchase decisions. And the numbers make this worth caring about: people with disabilities and their families represent a significant portion of online shoppers.
There’s also an SEO benefit. Descriptive, specific alt text is indexed by search engines. Accurate product descriptions in alt attributes improve image search visibility and contribute to overall page relevance.
What Makes Good Product Alt Text
Good e-commerce alt text answers the question: what would a customer need to know from this image to decide whether to buy?
That means different things for different product types, but the general pattern is:
- What the product is (type and name)
- Key visual details (color, pattern, material appearance)
- Orientation or view (front view, side view, detail close-up)
- Distinctive features visible in the image
Practical examples
Clothing: Bad: alt="shirt" Good: alt="Navy blue slim-fit Oxford button-down shirt, front view, single chest pocket"
Furniture: Bad: alt="product image" Good: alt="Mid-century walnut coffee table with tapered legs and rounded edges, shown in a living room setting"
Electronics: Bad: alt="laptop" Good: alt="Silver 14-inch laptop, open at 90 degrees, showing thin-bezel display and backlit keyboard"
Food and drink: Bad: alt="coffee" Good: alt="250g bag of medium-roast single-origin Ethiopian coffee beans, kraft paper packaging with red label"
Notice the pattern: product type + key visual attributes + view/context. Not a creative description — a functional one that serves the purchase decision.
Different Image Types Need Different Alt Text
Most product pages have multiple images. Each serves a different purpose and needs alt text that matches.
Main product image
The primary image — what appears in search results and category listings. Alt text should identify the product clearly: type, color, key features, view angle.
Alternate views
Back view, side view, top-down — each adds information the main image doesn’t. Alt text should describe what this specific view shows: “Back view showing adjustable waist strap and rear zip pocket.”
Detail and close-up shots
Material texture, stitching, logo placement, hardware details. Alt text describes the detail: “Close-up of brushed nickel zipper pull and leather trim on front pocket.”
Lifestyle and context images
Product shown in use or in a styled setting. Alt text describes both the product and the context: “Woman wearing the navy Oxford shirt tucked into high-waisted trousers, in an office setting.” These images help customers envision the product in their life — the alt text should convey that.
Color variant swatches
Color swatches need alt text that names the color accurately: alt="Sage green", alt="Burnt sienna". A bare swatch with no alt text or alt="swatch" gives a screen reader user no ability to select the color they want.
Decorative and background images
Purely decorative images — background textures, visual dividers, ambient lifestyle photography that adds no product information — should have empty alt text (alt=""). This tells screen readers to skip the image entirely. Generating a description for a decorative image adds noise without value.
Get BarrierBreak’s stories in your inbox
Join Medium for free to get updates from this writer.
For a deeper look at why image descriptions are a core part of content accessibility — beyond just e-commerce — this article on image description as an integral part of content accessibility covers the broader principles.
Best Practices for E-Commerce Alt Text
- Be specific to the product, not generic. “Blue dress” is less useful than “Royal blue A-line midi dress with cap sleeves and V-neckline.”
- Include the details that drive purchase decisions. Color, material appearance, size impression, and distinctive features are what customers look at.
- Match the alt text to what the specific image shows. Don’t use identical alt text across five different product views.
- Keep it concise but complete. A sentence or two is typical. Don’t write a paragraph, but don’t compress to a single word either.
- Name colors accurately. “Navy” and “teal” convey more than “dark blue” and “blue-green.”
- Use empty alt text for decorative images. Not every image on a product page is informative.
- Don’t start with “image of” or “photo of.” Screen readers already announce the element as an image — starting with “image of” is redundant.
- Include brand and model names when visible and relevant to the purchase decision.
Complex Product Images: Size Charts and Comparison Tables
Some product pages include images of size charts, material comparison tables, or specification diagrams. These are complex images under WCAG — a brief alt text can’t convey all the data. For these, provide a long description: either structured HTML content on the same page, or a linked data table that presents the same information in text form.
alt="Size chart for women's dresses — see table below for measurements" paired with an actual HTML table of measurements is the accessible pattern.
Common Alt Text Mistakes in E-Commerce
- Filename as alt text. “IMG_4392.jpg” conveys nothing.
- Same alt text for every view. Five images of a product deserve five different descriptions.
- Keyword-stuffed alt text. “Blue shirt men’s shirt casual shirt Oxford shirt” is bad for accessibility and bad for SEO.
- Missing alt on color swatches. A screen reader user can’t select “sage green” if the swatch has no label.
- Alt text on decorative backgrounds. Creates unnecessary screen reader noise.
Teams that want expert review of their product alt text — particularly at scale — often work with accessibility specialists like the team at BarrierBreak, who write and test image descriptions with people with disabilities to ensure they actually communicate what the image shows.
Conclusion
Accessible product images and alt text for e-commerce are what let every customer evaluate your products equally. Write alt text that answers the purchase-decision question: what would a sighted customer learn from this image? Be specific about color, material, view, and distinctive features. Match each image to its own description. Use empty alt text for decorative images. Provide data tables for complex charts. The result isn’t just WCAG compliance — it’s a store where screen reader users can browse, compare, and buy with the same confidence as everyone else.
FAQ
What should product image alt text include? Product type, key visual details (color, material, pattern), the view or angle shown, and any distinctive features visible in the image. The goal is to communicate whatever a sighted customer would learn from looking at it.
Should every product image have alt text? Every informative image — product shots, detail views, lifestyle images, color swatches — needs descriptive alt text. Decorative images (background textures, visual dividers) should have empty alt text (alt="") so screen readers skip them.
How long should product alt text be? One to two sentences is typical. Long enough to be specific; short enough to be efficient. “Navy blue slim-fit Oxford shirt, front view, single chest pocket” is about right. Don’t compress to one word; don’t write a paragraph.
Should I start alt text with “image of”? No. Screen readers already announce the element as an image — adding “image of” is redundant. Start with the content: “Navy blue Oxford shirt” not “Image of a navy blue Oxford shirt.”
What about size charts presented as images? Size charts are complex images — a short alt text can’t convey all the data. Provide a brief alt text summarizing what the chart is (“Size chart for women’s dresses”), then present the full data as an HTML table on the page.
Does alt text help with SEO? Yes. Search engines index alt text and use it to understand image content. Specific, accurate product descriptions in alt attributes improve image search visibility and contribute to page relevance — as long as the text is descriptive, not keyword-stuffed.
