Alt text for e-commerce product images: what to write and what to avoid
Missing or inadequate alt text is the most common accessibility finding on e-commerce sites. It appears on product detail pages, category grids, home page banners, blog posts, and navigation icons. The image-alt violation in an automated accessibility scan means an <img> element has no alt attribute at all, or its alt attribute is empty when the image carries information a screen reader user needs.
This guide covers what alt text to write for each image type that appears on a product-focused site, what to avoid, and how to implement it in Shopify, WooCommerce, and BigCommerce.
What alt text does
A screen reader announces the content of an image using its alt attribute. When no alt attribute exists, the browser falls back to the image filename, which becomes something like "product-image-1-of-5.jpg" or "IMG_4582.png" read aloud. Neither tells a shopper what they are looking at.
Alt text also serves as the text equivalent when images fail to load. And for linked images, the alt text becomes the link name -- the mechanism by which a keyboard or screen reader user understands where the link goes.
The two categories: informative and decorative
Every image on a page falls into one of two categories, and the rule changes completely depending on which one applies.
Informative images convey something the user needs to understand the content: a product photo, a chart, a photo of text, a badge or icon that signals something. These require meaningful alt text.
Decorative images are purely visual -- they do not add information beyond what is already communicated by surrounding text. A gradient background, a divider graphic, a purely cosmetic flourish. These should have alt="" (empty alt attribute) so screen readers skip them entirely.
The critical distinction: empty alt (alt="") on an informative product image is a failure. The image attribute is present, but the alt text communicates nothing. Automated scanners catch missing alt attributes directly; they flag empty alt on images that appear to convey information based on context signals like image size, position, and surrounding link or heading elements.
Main product images
The primary photo on a product detail page is the image a shopper uses to decide whether to buy. The alt text should describe what the image shows, including color, material, configuration, or angle when those details are not obvious from the product name.
A straightforward formula: product name plus distinguishing detail.
| Product name | Avoid | Better |
|---|---|---|
| Canvas tote bag | alt="bag" |
alt="Natural canvas tote bag with tan leather handles" |
| Ceramic mug | alt="mug.jpg" |
alt="Matte black 12 oz ceramic mug" |
| Running shoe | alt="" |
alt="Nike Pegasus 41 in volt green, lateral side view" |
Include the color when color is a key purchase consideration. Include the view (front, back, side, detail) when there are multiple gallery images and the view changes what is shown.
Gallery and secondary images
Product pages typically have four to eight images: front, back, detail shots, size reference, lifestyle context. Each one should communicate what it shows, not repeat the product name.
<!-- Gallery images for a jacket -->
<img src="jacket-front.jpg" alt="Navy quilted jacket, front view">
<img src="jacket-back.jpg" alt="Navy quilted jacket, back view">
<img src="jacket-detail.jpg" alt="Jacket collar and zipper detail, brushed metal hardware">
<img src="jacket-model.jpg" alt="Model wearing the jacket outdoors in a forest setting">
<img src="jacket-size.jpg" alt="Size reference: jacket on model who is 5 feet 10 inches wearing a medium">Repeating the same alt text across every gallery image ("Blue jacket", "Blue jacket", "Blue jacket") fails screen reader users who navigate by headings and images. Each alt text should convey what changes across the images.
Thumbnail images that activate a gallery view
When gallery thumbnails are wrapped in buttons or links that swap the main image, the thumbnail's alt text and the button's accessible name work together. The cleanest approach is to give the thumbnail a descriptive alt text and let the button inherit it, without adding separate button labels that duplicate it.
<!-- Thumbnail button for gallery -->
<button type="button" aria-label="View: jacket back view">
<img src="jacket-back-thumb.jpg" alt="" aria-hidden="true">
</button>Note the pattern: the <img> inside the button has alt="" and aria-hidden="true" because the button itself carries the accessible name via aria-label. This avoids double-announcing "jacket back view" twice. The alternative is to give the image the alt text and omit the explicit aria-label:
<button type="button">
<img src="jacket-back-thumb.jpg" alt="Jacket, back view">
</button>Either pattern is acceptable. What is not acceptable is a button containing an image with no alt and no button label -- that is an unlabeled button, which fails 1.1.1 and 4.1.2 simultaneously.
Color swatch images
Color swatches that use images instead of plain CSS squares are a common source of alt text failures. The swatch image itself usually needs the color name as its alt text, or the surrounding button needs a label that includes the color name.
<!-- Swatch as a radio input (recommended) -->
<label>
<input type="radio" name="color" value="navy">
<img src="swatch-navy.jpg" alt="Navy">
</label>
<!-- Swatch as a button -->
<button type="button" aria-label="Color: Navy" aria-pressed="false">
<img src="swatch-navy.jpg" alt="" aria-hidden="true">
</button>If the swatch represents a pattern as well as a color (for example, a fabric with a herringbone weave), describe both: "Navy herringbone" rather than just "Navy".
Lifestyle and context images
Lifestyle images show the product in use or in context. The alt text should describe the scene if it communicates something about the product's use, scale, or appeal.
<!-- Lifestyle image that communicates product context -->
<img src="bag-beach.jpg"
alt="Canvas tote bag sitting on sand next to a towel, showing the bag holds a water bottle, sunscreen, and a paperback">If the lifestyle image is purely atmospheric and the product name or nearby text already covers everything a shopper needs to know, it may qualify as decorative:
<!-- Purely atmospheric image with no informational content -->
<img src="brand-mood.jpg" alt="">When in doubt, write a brief description. The risk of unnecessary alt text is minor compared to the risk of leaving a meaningful image undescribed.
Images containing text
If an image contains readable text -- a promotional banner ("30% off all outerwear"), a label ("New arrival"), an infographic with numbers -- the alt text must include that text. Images of text that have no alt text are a common finding on home pages that use designed promotional banners.
<!-- Promotional banner with text in the image -->
<img src="summer-sale-banner.jpg"
alt="Summer sale: 30% off all swimwear, through July 4">A separate WCAG criterion (1.4.5, Images of Text) discourages using text in images at all when real text can achieve the same visual result. But that is a Level AA criterion; getting the alt text right is the Level A fix that matters first.
Linked images
When an image is wrapped in an <a> tag, the alt text of the image becomes the accessible name of the link. A link that goes to the product detail page for a canvas tote bag needs alt text that names where the link goes, not just what the image shows.
<!-- Product card image as a link -->
<a href="/products/canvas-tote-bag">
<img src="tote-bag.jpg" alt="Canvas tote bag">
</a>This is a case where the product name in the alt text serves double duty: it describes the image and names the link destination. If the link wraps both an image and a text label, the image should have alt="" to avoid announcing the product name twice:
<!-- Product card with image + text inside the same link -->
<a href="/products/canvas-tote-bag">
<img src="tote-bag.jpg" alt="">
<span>Canvas Tote Bag</span>
</a>Brand and logo images
A logo image in a header that links to the home page should have alt text that names the brand, not "logo" or "home":
<a href="/">
<img src="logo.svg" alt="Parachute Home">
</a>An inline brand mark that appears alongside text already naming the brand can be decorative:
<p><img src="logo-small.svg" alt=""> Parachute Home</p>Common mistakes to avoid
Filenames as alt text
When no alt attribute exists, some browsers and screen readers announce the filename. Other platforms auto-generate alt text from filenames during upload. Neither is useful: "product-detail-1234-compressed-final-v2.jpg" tells a shopper nothing.
Generic alt text that adds no information
<!-- These are not useful -->
<img src="product.jpg" alt="image">
<img src="product.jpg" alt="photo">
<img src="product.jpg" alt="product image">"Image" tells a screen reader user what they already know: it is an image. The alt text should describe its content.
Keyword-stuffed alt text
<!-- Keyword stuffing: do not do this -->
<img src="shoe.jpg" alt="running shoes men women athletic training marathon best running shoes 2026 buy running shoes online">This is a violation of 1.1.1 in spirit and a bad experience for screen reader users. Search engines also penalize it.
Missing alt on an icon inside a link
Cart icons, heart icons, and account icons that are wrapped in links are a consistent finding on e-commerce headers. The SVG or image needs an accessible name; the link needs a name:
<!-- Broken: no accessible name on the link -->
<a href="/cart">
<img src="cart-icon.svg">
</a>
<!-- Fixed: alt text on the image serves as the link name -->
<a href="/cart">
<img src="cart-icon.svg" alt="Cart">
</a>
<!-- Also acceptable: aria-label on the link, hide the image -->
<a href="/cart" aria-label="Cart">
<img src="cart-icon.svg" alt="" aria-hidden="true">
</a>Platform-specific implementation
Shopify
In Shopify, the alt text for a product image is set in the product editor (Products > [Product] > Media, click the three-dot menu on an image, then "Edit alt text"). This populates image.alt in Liquid templates.
Most themes output the alt text like this:
{{ image | image_url: width: 800 | image_tag:
loading: 'lazy',
alt: image.alt | escape }}If image.alt is empty, the image_tag filter outputs alt="", which is technically valid for decorative images but wrong for product photos. The alt text field in the Shopify admin is the right place to write this content; the template just outputs whatever is there.
For variant images tied to specific color or material options, set the alt text to the variant name or option combination so customers and screen readers have the context.
WooCommerce
In WooCommerce, alt text is set in the WordPress Media Library. When you add a product image (Products > [Product] > Product image), click the image to open the Media Library, then find the "Alternative Text" field in the sidebar. This maps to the alt attribute in the HTML output.
WooCommerce outputs product images via woocommerce_get_product_thumbnail() or the gallery hooks. The alt text in the Media Library entry is what reaches the frontend. Product variation images that are uploaded separately each need their own alt text set in the Media Library.
A common gap: images that were uploaded via bulk import (CSV or a migration plugin) often arrive with empty alt text fields because the import did not include alt text data. These require a batch update in the Media Library.
BigCommerce
In BigCommerce, alt text is set per-image on the product editing page. Navigate to Products > [Product] > Images and Videos. Click the edit icon on an uploaded image to enter the alt text. BigCommerce outputs this in the alt attribute via its template engine.
Category images and brand images have separate alt text fields in their respective sections of the BigCommerce admin.
Custom HTML
For custom-built storefronts, the pattern is the same regardless of framework:
<!-- Informative image: describe the content -->
<img
src="/images/jacket-navy-front.jpg"
alt="Navy quilted jacket, front view"
width="800"
height="1000"
loading="lazy"
>
<!-- Decorative image: empty alt, skip for screen readers -->
<img
src="/images/divider-wave.svg"
alt=""
aria-hidden="true"
width="1200"
height="40"
>CSS background images
Images set as CSS background-image have no HTML element to attach an alt attribute to. Screen readers cannot see them at all. This is fine for decorative backgrounds and patterns, but it is a pattern to avoid for product images or any image that carries information.
If a design requires a CSS background image for an informative element (for example, a hero banner with a product photo and a headline), make sure the headline text in the HTML accurately describes what the image conveys. The image itself cannot carry alt text, so the surrounding HTML must cover the information.
How automated scanners detect missing alt text
Automated accessibility scanners check every <img> element on a page. An image-alt finding means one or more images has no alt attribute at all -- not even an empty one. The scanner cannot know whether the content is meaningful, so it flags every missing alt as a potential failure.
Scanners also flag images with role="img" on non-<img> elements (SVGs, divs) that lack an accessible name. And they flag linked images where neither the image alt nor the link aria-label provides a name -- those come up as link-name failures in addition to or instead of image-alt.
Empty alt on an image that appears to be informative (based on size, position, or link context) is a separate finding type. Scanners use heuristics here; a large image in the center of a product page with alt="" is treated differently than a small decorative icon with alt="".
Checking your own site
A quick browser check: in Chrome DevTools, open the Elements panel and search for alt="" to see all images with empty alt attributes. Cross-reference these against the page visually -- if the empty-alt images are product photos or content images, they need descriptive alt text.
The browser accessibility tree (DevTools > Accessibility panel, then click any element) shows how a screen reader will interpret each image. An image with missing or empty alt shows "Ignored" or a blank name in this panel.
BarrierScan's automated scans flag every image-alt and link-name failure across all crawled pages, organized by severity and page. The sample report shows what this looks like in practice. A full-site scan typically surfaces alt text issues on category pages, product detail pages, and home page banners that a single-page manual check would miss.