How to Write Alt Text for Product Images, With Examples

Key takeaways

• Alt text replaces the image for anyone who can't see it. Write what a shopper would miss: the product type, then the detail this particular photo exists to show.

• Give every image in the gallery its own alt text. Pasting the product title on all of them tells a screen reader user nothing new, and some platforms do it for you when the field is blank.

• 125 characters is a habit, not a limit. HTML and WCAG set no length cap, and screen readers don't cut text off at 125. Keep it short anyway, because shoppers can't skim it.

• Put size charts and specs in real text. An image of a table needs the same data in HTML on the page, with a short alt that points to it.

• Treat AI-written alt text as a draft. Generators get colors and materials wrong and repeat themselves across a gallery, so check each one against the photo.

What alt text does on a product page

Alt text is the text alternative for an image, stored in the image's alt attribute. The HTML standard describes it as replacement text, not a caption. It's what a screen reader reads aloud, what a browser shows when the image fails to load, and one of the signals search engines say they use to understand what an image shows.

On a product page, it carries more weight than almost anywhere else. A shopper using a screen reader can't see the color, the stitching, or how big the bag is next to the model, so the gallery alt text is the product for them. WCAG, the standard most accessibility laws point to, requires a text alternative for every image that conveys information (Success Criterion 1.1.1).

Most stores still miss it. WebAIM's 2026 scan of the top one million home pages found missing alt text on 53.1% of them, and shopping home pages averaged 71 detectable accessibility errors each, against 56 across all home pages.

Step 1: Decide what job the image does

The W3C's alt text decision tree sorts images into a few types, and each gets different alt text.

• Informative: the photo shows something about the product. Almost every gallery image is this type, and it needs a description.

• Decorative: the image only sets a mood or repeats text that's already next to it. It gets an empty alt (alt=""), so screen readers skip it.

• Functional: the image is a button or link, such as a color swatch or a zoom icon. The alt says what it does or what option it picks, not what it looks like.

• Complex: a size chart, spec diagram, or infographic. The alt identifies it, and the full data goes in text on the page.

Don't mark gallery photos decorative to clear an audit. If an image adds information, it needs a description.

Step 2: Say what the shopper would miss

The HTML standard suggests a simple test. Imagine reading the page to someone over the phone without mentioning that there's an image. What would you say about the photo?

Start with the product type in plain words, then the visible detail this shot is there to show. "Back of a sage green linen shirt, showing the box pleat and curved hem" tells a shopper something the front view doesn't.

Step 3: Add the details a sighted shopper sees

Pick the attributes that apply to this image, and skip the ones that don't.

• Color, material, pattern, and finish, such as "rust orange," "brushed brass," or "pinstripe."

• The view or angle, such as front, back, top-down, or a close-up of the fabric.

• Scale or model context, such as "on a model wearing size M" or "next to a sofa for scale."

• The brand, only when it helps someone tell products apart, as on a store that sells many brands.

Step 4: Make each image in the gallery different

If a product has seven photos, it needs seven different alt texts. The front view, the back, the detail shot, and the photo in use each show something new, and the alt text should say what.

Watch for platform defaults, since they're easy to miss. BigCommerce, for example, uses the product name as the alt text when the image description field is left blank, which gives every image in the gallery the same alt. WebAIM's scan counts repetitive alt text like this as a problem, alongside file names and generic labels.

Step 5: Keep it short and plain

There's no character limit in HTML or WCAG. The often-quoted 125 characters comes from an old version of the JAWS screen reader that read alt text in 125-character chunks, which listeners mistook for a cutoff. Accessibility consultant Eric Eggert explains the myth: screen readers don't hide the rest of the text.

Short still wins, though. A screen reader user can't skip around inside alt text, and a product page has a lot of images to get through before the price and the buy button. WebAIM's advice is that a few words is usually enough, and rarely a sentence or two. Keeping to about 125 characters is a good habit, and anything longer belongs in the product description.

Leave out:

• "Image of" or "photo of," since screen readers already announce an image.

• Keyword lists, which read as noise and which search engines' own guidelines warn against.

• Prices, discounts, and claims like "best-selling," which aren't in the photo and go out of date.

• Anything already in the caption or the text next to the image.

• File names and SKUs, such as "IMG_4471.jpg."

Step 6: Move text and data out of the image

WCAG asks for real text instead of images of text wherever the design allows it. For a product page, that means size charts, ingredient lists, and spec infographics should also exist as HTML text on the page.

Then the image needs only a short alt that identifies it, such as "Size chart for the linen shirt, also shown in the table below." If the same chart sits right next to the image as a table, an empty alt is fine too. What doesn't work is stuffing every measurement into the alt text, which turns into a wall of numbers no one can follow.

Step 7: Label swatches and variants

A color swatch is a button, so its alt text (or accessible name) is the option it selects: "Navy," not "blue square." When a shopper picks a color and the gallery changes, the new images should name the color in their alt text, such as "Linen shirt in navy, front view," so they know the image changed.

A row of star icons isn't any different. One text alternative such as "4.5 out of 5 stars" covers the group, and the individual stars get an empty alt.

Step 8: Enter it where your platform reads it, then audit

Every store platform has a field for it, though it's in a different place on each.

• Shopify: open the product, click the image, and choose "Add alt text." The field takes up to 512 characters and Shopify recommends 125 or fewer. You can also add alt text in bulk through the product CSV, as our Shopify product image guide explains.

• WordPress and WooCommerce: product images use the Alt Text field in the Media Library. Alt text set in an Image block applies only to that page, while the Media Library field sets the default everywhere the image is used.

• BigCommerce: the image "Description" field is the alt text, and a blank one falls back to the product name.

Marketplaces build their own product page markup and don't publish their alt text rules. For the image rules they do publish, see our Amazon and Walmart image guides.

To audit a catalog, export it to a spreadsheet and filter the alt text column for blanks, duplicates, and file names. Or crawl the storefront and list every product image with its alt, flagging any that match the product title. Then listen to one or two product pages with the screen reader built into your phone or computer, and repeat the check whenever you upload a new batch.

Good and bad examples

A lifestyle photo that only sets the mood and shows nothing new about the product can take an empty alt. The one above earns a description because it's the only shot that shows the sideboard's size.

Using AI to write alt text

Some store platforms now suggest alt text automatically, and plenty of tools generate it in bulk. Use the output as a first draft.

The W3C's own 2026 discussion paper on the web in the AI era says generated alt text "may be inaccurate" and shouldn't entirely replace descriptions written by the people who made the page. When UK government accessibility testers tried a generator, it described objects that weren't in the picture and missed obvious colors. On product photos, the usual errors are a color thrown off by studio lighting, the wrong material ("leather" for a vegan leather bag), and the same generic line on every image in a gallery. A generator also can't know which detail a particular shot was taken to show.

Read each draft against the photo before you publish it.

Is alt text a legal requirement?

This isn't legal advice, but two rules come up for online stores.

• United States: the Department of Justice's web accessibility guidance says the ADA applies to the websites of businesses open to the public, and it lists missing text alternatives for images as a barrier. There's no detailed federal regulation for private businesses, and one litigation tracker counted 70% of 2025's digital accessibility lawsuits against ecommerce sites.

• European Union: the European Accessibility Act has covered ecommerce services sold to consumers since June 28, 2025. Microenterprises (fewer than 10 people and annual turnover or balance sheet total of no more than EUR 2 million) are exempt. Stores that sell to EU shoppers should check their obligations with counsel.

Alt text checklist

• Every product image has an alt attribute, empty only if it's decorative or fully repeated in nearby text.

• The first words name the product type.

• Color, material, pattern, and view are included where they're visible and useful.

• Each image says what it shows that the others don't.

• No "image of," file names, SKUs, prices, or claims.

• No keyword lists, and the brand only when it helps.

• Not a copy of the product title, caption, or nearby text.

• About 125 characters or fewer, with longer detail in the page text.

• Size charts and infographics have the same data in HTML.

• Swatches are named by option, and variant images name the color.

• AI-suggested alt text isn't published until it's been checked against the photo.

• The catalog is audited for blanks, duplicates, and file names after every upload.

Frequently asked questions

How long should alt text be for product images?

Usually a few words to one short sentence. HTML and WCAG set no limit, and Shopify's field takes up to 512 characters while recommending 125 or fewer. Keeping to about 125 characters is a good habit, and anything longer belongs in the product description.

Do screen readers cut off alt text after 125 characters?

No. The figure comes from an old version of the JAWS screen reader that read alt text in 125-character chunks. Screen readers don't stop at 125, but long alt text is still slow to listen to.

Should every product image have alt text?

Every image needs an alt attribute. Images that show something about the product need a description, and images that are purely decorative or fully repeated in nearby text get an empty alt (alt="") so screen readers skip them.

Does alt text help SEO?

Search engines say they use alt text, along with file names, captions, and the text on the page, to understand what an image shows. They also warn against stuffing alt text with keywords, so write it for the shopper first.

Can I use AI to write alt text for product images?

Yes, but it's only a draft. Generators often get colors and materials wrong and produce the same description for every image in a gallery, so check each one against the photo before it goes live.

Is alt text required by law for online stores?

In the US, the Department of Justice says the ADA applies to business websites and names missing image text alternatives as a barrier. In the EU, the European Accessibility Act has covered ecommerce services to consumers since June 28, 2025, with an exemption for microenterprises. Check your obligations with counsel.