Alt Text for Product Photos: Examples That Work

Alt text for product images works when it answers the question a shopper would ask about the photo: what is it, what color is it, what is it made of, and what detail changes the purchase. A screen reader user cannot see the photo, so the alt text has to carry the buying information the photo carries. A short, plain description beats a file name, a single word, or a long list of every visual detail.

WCAG success criterion 1.1.1, Non-text Content, at Level A, says all non-text content has a text alternative that serves the equivalent purpose. The W3C images tutorial adds the practical split: informative images get a short description, functional images get text describing the function, and decorative images get alt="". Start by asking what job the image does on that page.

Key takeaways

• Name type, color, material and the detail that changes the purchase in the main product photo.
• For a variant photo, name only what changed from the main photo, so a shopper hears the difference at once.
• Give a lifestyle photo the quality it shows, such as drape, sheen, fit or scale, not a list of background props.
• Leave a truly decorative image with an empty alt attribute, and never leave the alt attribute off by accident.
• For a linked image, describe the destination or action, and for an image that carries text, repeat those words.

Start with the job of the photo

A product page usually holds several kinds of images, and one rule does not fit all of them. Sort the images before you write anything.

An informative image shows something a shopper needs to know: the main photo, a variant photo, or a close up of a clasp or weave. A functional image does a job: a thumbnail linking to another product, a logo linking home, or an icon opening a size guide. A decorative image adds polish and no buying information: a swirl, a divider, a repeated pattern. An image of text carries words inside the picture, such as a sale banner or a size chart graphic.

The same photo can need different alt text in different spots: on a product page it describes the scarf, as a collection link it describes where the link goes.

Alt text product images: type, color, material, detail

The main photo does the most work, so give it the fullest description, still kept short enough to hear in one breath. Name the product type first, then color, then material, then one defining detail. Skip the background, skip the camera angle, and skip words a screen reader already supplies. Do not start with "image of", since the screen reader already announces the element as an image.

Here is a weak version, the kind that ships when a field is filled in a hurry:

<img src="scarf-4821.jpg" alt="scarf">

It names the type and nothing else. A shopper cannot tell the color, the material, or whether this is the item they wanted. Here is a stronger version for the same photo:

<img src="scarf-4821.jpg" alt="Navy wool scarf with a fringed edge">

That version names type, color, material and detail in eight words. If the photo shows a detail that changes the purchase, name that detail instead of a generic feature. A lined interior, a magnetic clasp, a reinforced base or a waterproof coating all belong in the alt text when they are visible in the photo and relevant to the choice.

Variants and colors: name what changed

Variant photos cause the most repeated alt text on a store, and repeated alt text is the trap. When every variant photo carries the same description, a shopper browsing variants hears the same words again and again and learns nothing new. The fix is simple: for each variant, name only what changed.

Suppose the main photo is the navy scarf above. A charcoal variant photo should not repeat the full description. It should say what is different:

<img src="scarf-charcoal.jpg" alt="Same wool scarf in charcoal, with a fringed edge">

A shopper who has already heard the main description now hears the one new fact: the color. The same rule works for a pattern change or a material change, such as "Same tote bag in tan leather, with a zip pocket inside" for a leather version of a canvas tote.

Color names need care. Pair a trade name with a plain color word, such as Midnight blue, and state the variant choice in text beside any swatch, not by color alone. Also check that alt text changes when a variant picker swaps the photo. A picker that keeps the old alt text is a quiet bug.

Lifestyle shots and texture: name the quality

A lifestyle photo exists to show a quality a shopper cannot feel through a screen: how a fabric drapes, how a mug sits in a hand, how a bag looks worn over a shoulder. The alt text should name that quality, not describe the room, the model, or the props in detail.

Weak version:

<img src="mug-kitchen.jpg" alt="mug">

Stronger version, written for a photo that shows scale and finish:

<img src="mug-kitchen.jpg" alt="Speckled stoneware mug held in one hand, showing its size">

The stronger version names material, finish and purpose: to show size. A scarf worn outdoors should name drape or length, for example "Navy wool scarf worn loosely, hanging past the waist". Do not describe the room or the weather. If a background detail changes the purchase, such as a bag beside a laptop for scale, name the scale point and stop there. A close up should likewise name the texture or hardware, for example "Close up of the wool scarf weave, showing a tight knit".

Decorative, linked and text images: three different rules

A background swirl, a divider or a repeated pattern carries no buying information, so it should be skipped by assistive technology. Give it a deliberate empty alt attribute:

<img src="divider.png" alt="">

An empty alt attribute is a choice. A missing alt attribute is not: some screen readers read the file name aloud, so a shopper hears "divider png" for no reason.

Linked images follow a different rule: describe the destination or action, not the picture. A thumbnail linking to a collection page should say where it goes:

<a href="/collections/scarves"><img src="scarf-thumb.jpg" alt="Shop the wool scarf collection"></a>

A logo that links home should carry the brand name, not the word "logo". An icon button that opens a size guide should say "Open size guide", not describe the icon shape. If the link already has text beside the image, the image can carry an empty alt attribute so the listener does not hear the same words twice.

Images of text need the words themselves. A sale banner reading "Autumn sale, 20 percent off scarves until Sunday" should carry those words in the alt text, word for word. For a longer offer or a size chart, put the full terms in real text on the page and use the alt text to name the chart. For checkmark icons in a pricing table, pair each icon with plain text, as the accessible pricing table guide shows.

How Axeazy helps with this exact issue

Axeazy lists alt text among the 14 fix categories it works on. Read the honest scope on the capabilities page. For a Shopify store, the scan works, and the fixes come as a guided, plain English checklist the merchant or their theme editor follows. Shopify does not get an automatic pull request and does not get an automatic Liquid template fix.

For WordPress stores, the free plugin applies an alt text fallback at render time, among its three instant fixes. Read how that plugin works on the WordPress plugin page. A fallback is a safety net, not a substitute for writing the description yourself.

Want a quick read on your own site? Run Axeazy's free 60 second scan . It needs no signup.

Last checked: October 28, 2026.

FAQ

What should alt text for a product photo say first?

It should say the product type, then color, then material, then one defining detail, in that order, kept short enough to hear in one breath. Skip the background and skip words a screen reader already supplies, such as "image of".

How is alt text for a variant photo different from the main photo?

It should name only what changed, such as the color, pattern or material, so a shopper browsing variants hears the new fact at once. Repeating the full main description on every variant hides the difference the shopper is trying to find.

Should a decorative image on a product page have alt text?

No. Give it an empty alt attribute, written as alt="", so assistive technology skips it. That is different from leaving the attribute off, which can lead some screen readers to read the file name aloud.

What alt text should a sale banner image carry?

It should repeat the words inside the image, word for word, when the offer is short. For a longer offer or a size chart, put the full terms or data in real text on the page and use the alt text to name the image and point to that text.

Sources

• W3C WAI Images Tutorial, checked October 28, 2026
• W3C Understanding Success Criterion 1.1.1: Non-text Content, checked October 28, 2026
• Shopify Image Alt Text: How to Write It, checked October 28, 2026