How to Write Alt Text for Product Images That Helps Shoppers
Short answer: Good product alt text describes what a shopper who can't see the image needs to know, such as the item, color, material and distinguishing detail, in a short phrase. Skip details already in the page text, and mark purely decorative images with empty alt text. Review bulk-generated text before publishing.
Product images do a lot of selling. For shoppers who use screen readers, or whose images fail to load, the alt text is the only way to get that information. This guide shows how to write alt text that is useful, with examples for common product types and a workable approach for large catalogs.
What alt text is for
The alt attribute gives an image a text alternative. WCAG Success Criterion 1.1.1, Non-text Content, requires text alternatives that serve the equivalent purpose of non-text content. The key idea is purpose. Ask what the image is doing on the page, then write text that does the same job.
On a product page, an image usually does one of three jobs:
- It shows what the product looks like (informative).
- It repeats information already given in nearby text (redundant).
- It adds nothing but visual style (decorative).
Each gets different treatment.
Informative vs. decorative images
Informative images
Product photos that show the item, a detail, or a use case are informative. Describe what a buyer would want to know: what the item is, its color, material or pattern, and anything visible that affects a buying decision.
Decorative images
Decorative images carry no information, such as a divider flourish, a background texture, or a purely ornamental icon. Give these an empty alt attribute so assistive technology skips them:
<img src="divider.svg" alt="">Omitting the attribute entirely is different. Screen readers may then announce the file name, which is noise. An empty alt="" is a deliberate signal.
Redundant images
If a thumbnail sits inside a link that already contains the product name as text, repeating the name in the image alt makes screen readers announce it twice. In that case an empty alt on the image is often the better choice, because the link text already carries the meaning. See Link Purpose (In Context) for how link names are evaluated.
Images that are links or buttons
When the image is the only content of a link or button, the alt text should describe where it goes or what it does, not what it looks like. A magnifier icon on a button needs alt text like "Search", not "magnifying glass". Related guidance is in Name, Role, Value.
A simple writing formula
For most product images, this order works well:
- What it is: the product type
- Distinguishing attributes: color, material, pattern, style
- Visible context: only if it matters, such as being worn or in a room
A few habits help:
- Keep it short. One brief phrase is usually enough. There is no official character limit in WCAG, but concise text is easier to listen to.
- Don't start with "image of" or "photo of". Screen readers already announce that it is an image.
- Don't stuff keywords. Alt text written for search engines tends to be unhelpful to people.
- Put long details such as size charts, ingredient lists and care instructions in real page text, not in alt text.
Examples by product type
Apparel
| Weak | Better |
|---|---|
alt="shirt" | alt="Navy crew-neck cotton t-shirt, front view" |
alt="IMG_2041.jpg" | alt="Woman wearing a long-sleeve olive linen button-down, untucked" |
alt="best cheap jeans blue denim" | alt="Straight-leg dark wash jeans, back view showing patch pockets" |
For apparel, the angle often matters (front, back, detail), as does fit when a model is shown. Fabric close-ups can be described by what they show: "Close-up of ribbed knit cuff".
Furniture
<img src="sofa-1.jpg"
alt="Three-seat sofa in gray fabric with wooden legs and two throw pillows">
<img src="sofa-2.jpg"
alt="Sofa arm detail showing stitched seam and wood leg joint">Mention materials and distinctive features that shoppers compare. Dimensions belong in the product specifications text, where everyone can read them, rather than in the alt attribute.
Food
<img src="granola.jpg"
alt="Open bag of maple pecan granola with a bowl of granola and milk beside it">Describe the product as presented. Do not put allergen or nutrition information only in an image or only in its alt text. Put it in visible text where all shoppers can find it. If a label image contains text a shopper needs, that text must also be available elsewhere on the page.
If you run a restaurant with menu photos, the restaurant website accessibility guide covers related issues.
Images containing text
If a product image includes text that matters, such as a badge reading "Limited edition" or text printed on packaging, the alt text should convey it. For text that is part of the page's messaging, real HTML text is generally better than text baked into an image.
Variants and color swatches
Variant selectors are where alt text most often breaks.
Color swatches
A swatch is usually a control, so it needs an accessible name that tells the shopper which option it selects. Color alone cannot be the only way to convey that information.
<button type="button" aria-pressed="false">
<img src="swatch-navy.png" alt="Navy">
</button>Here the image alt becomes the button's accessible name. A better pattern is often visible or programmatically associated text, such as a label, plus the selected state. Radio inputs with proper labels are another good option; see Labels or Instructions.
Main image per variant
When a shopper picks a variant and the main image changes, the new image should have its own alt text that names the chosen variant, for example "Navy crew-neck t-shirt, front view" instead of a generic or stale description. Also make sure the change is perceivable to assistive technology users, for example by updating a visible label such as "Color: Navy" in text.
Gallery thumbnails
Each thumbnail should have a distinct alt, such as "Front view", "Back view" and "Detail of collar". Identical alt text across a gallery gives screen reader users no way to tell the images apart. Thumbnails that are buttons also need to be reachable and operable by keyboard; see Keyboard.
Bulk workflows for large catalogs
Writing alt text for thousands of products by hand rarely works. A practical approach:
- Audit what exists. Export image data from your platform and look for empty, missing, duplicated or file-name-style alt values.
- Generate from structured fields. If your product data has type, color and material fields, a template can produce a solid baseline, such as
{color} {material} {product type}, {view}. - Handle view labels separately. Store an angle or shot-type field per image (front, back, detail, in use) so that gallery images don't all read the same.
- Review before publishing. Automated or AI-generated descriptions can be wrong, generic or inaccurate about color and detail. Check a sample from every category, and review high-traffic products fully.
- Set a rule for new uploads. Make alt text a required field in your upload process so the backlog does not grow again.
On WordPress or WooCommerce, alt text is set per image in the media library, and some importers can set it in bulk from a spreadsheet column. The WordPress accessibility guide goes into more platform detail.
An overlay widget is not a substitute for real alt text in your markup. See accessibility overlays and lawsuits for background.
Quick checklist
- Every
<img>has an alt attribute. - Informative images are described by purpose, briefly.
- Decorative images use
alt="". - Linked images describe the destination or action.
- Gallery images and variants have distinct, accurate text.
- Important information is also available as real page text.
- A person reviewed any bulk-generated text.
For the wider picture, see the WCAG 2.1 AA checklist. If you've received a demand letter, the demand letter guide explains common next steps. This article is general information, not legal advice, so talk to an attorney about legal questions. To see which images on your pages are missing alt text, you can run a free scan.
Frequently asked questions
How long should product alt text be?
There is no set limit in WCAG. A short phrase that identifies the product and its key visible attributes is usually enough. If you find yourself writing a paragraph, the extra detail probably belongs in visible page text instead.
Should I include the product name and SKU in alt text?
Include the product name or type if it helps identify what the image shows, but avoid stuffing in SKUs, brand strings or keywords. Alt text exists to describe the image for people, and codes rarely help. Put identifiers in visible product details.
When should a product image have empty alt text?
Use alt="" when the image is purely decorative or when it duplicates adjacent text that already conveys the same information, such as a thumbnail inside a link that already contains the product name. If the image adds information a shopper would want, describe it.
Is it okay to use AI-generated alt text for my catalog?
It can be a useful starting point for large catalogs, but it can misstate colors, materials or details. Review output before publishing, especially for high-traffic products, and correct anything that is generic or wrong. A person should be responsible for the final text.
Does fixing alt text protect me from a lawsuit?
Nobody can promise that. Courts have taken different approaches to website accessibility claims, and alt text is only one of many requirements. Fixing it improves the experience for shoppers, but ask an attorney about your specific legal situation.
Related
- WCAG 1.1.1 Non-text Content
- WCAG 2.1 AA checklist for business websites
- WordPress Accessibility: Themes, Plugins and What to Check
- Restaurant website accessibility: menus, ordering and reservations
Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.