Alt text for product images: examples and rules

A sighted shopper glances at a product photo and knows in a second whether it is the navy one or the black one. A shopper using a screen reader gets exactly what the alt text says, and nothing else. On a product page, that makes alt text part of the buying decision. This guide covers what to write for every kind of image a store uses, with examples. The examples are illustrative; the products in them are invented. For the general rules, see our complete guide to alt text and the alt text examples by image type.

Why product image alt text gets attention

Alt text is required by WCAG 1.1.1 Non-text Content, the first success criterion in the standard most accessibility laws point to. Two laws matter most to online stores. In the US, federal ADA Title III website accessibility lawsuits rose from 2,452 in 2024 to 3,117 in 2025 (adatitleiii.com); courts disagree on whether an online-only store is covered. In the EU, e-commerce is a named sector under the European Accessibility Act, which has applied since June 28, 2025, though microenterprises (fewer than 10 employees and an annual turnover or balance sheet total not exceeding EUR 2 million) are exempt from its service obligations. Missing or untrue alt text on product photos is easy for anyone to see. This is general information, not legal advice; our guides to ADA website compliance and the EAA cover the law, and the which laws apply tool narrows it down for your business.

The formula: product, then what sets it apart

Start with what the product is, then add the visible details a shopper would use to choose between it and its neighbors. Stop when the image is distinguishable.

• Product type: "Backpack", "Phone case", "Ankle boot".
• Key visible attributes: color, pattern, material when you can see it, shape, and the feature that makes this item this item ("with a zip front pocket", "with a magnetic charging ring").
• The view, when it is not the main one: "back view", "close-up of the clasp", "worn with a white shirt".
• Any text printed on the product, when it matters to the buyer: a slogan on a T-shirt, a size on a label.

Build-up for one photo:

• Too little: alt="Boot"
• Enough: alt="Tan suede ankle boot with a side zip and a block heel"
• Too much: alt="Tan suede ankle boot with a side zip and a block heel photographed at a three-quarter angle on a white studio background with soft shadow"

What to leave out

• The price, the SKU and the sale banner text that are already on the page as real text.
• Claims the photo cannot show. "Waterproof", "organic cotton" or "fits true to size" belong in the product description, not the image's alt text. Name a material only when it is visible and true, such as "suede" on a suede boot.
• "Image of" or "photo of". Screen readers already announce the image.
• Studio details: lighting, background, camera angle, unless the angle is the point of that gallery image.
• Keyword stuffing. More on that below.

Product image alt text examples

Variants: every colorway needs its own alt text

The most damaging product alt text error is also the most believable: alt text that is true of a different variant. It happens when a listing is duplicated to create a new color, or when a photo set is attached to the wrong option. The result reads perfectly, "Navy wool peacoat, double-breasted", on a photo of the camel one. Rule-based checks pass it, because nothing about the text is malformed.

• Write alt text for each variant's images separately, and name the variant's color or pattern in it.
• When one photo genuinely serves several variants (a size-only difference, for example), keep the alt text to what the photo shows.
• After a bulk import or a listing duplication, check the new variant's images against their alt text before publishing.

We measured how well a vision model catches this. In our test of AI alt text accuracy, alt text copied from the wrong colorway was the largest group of planted errors (23 of 62), and our production check flagged every one of them in all three runs. Look-alike patterns were harder: "Brown leopard print phone case" on a tortoiseshell case got through in one run of three.

Galleries, thumbnails and zoom

A product gallery is a group of related images, and the W3C groups of images tutorial says each image in such a collection needs its own text alternative. In practice:

• Main image: the full description from the formula above.
• Other views: say what that view adds ("Side view", "Inside pocket", "Sole tread"), not the full description again.
• Thumbnails that switch the main image are controls. Their accessible name should say what they show, so a listener knows what pressing one will display.
• Zoom and lightbox views show the same picture larger. The enlarged image still needs alt text, and the button that opens it needs a name such as "Zoom image" or "Open larger image".

<img src="backpack-olive-front.jpg" id="main-image"
     alt="Olive canvas backpack with brown leather straps and a zip front pocket">

<button type="button" aria-label="Zoom image">
  <img src="zoom-icon.svg" alt="">
</button>

<ul>
  <li><button type="button">
    <img src="backpack-olive-back-thumb.jpg" alt="Back view">
  </button></li>
  <li><button type="button">
    <img src="backpack-olive-buckle-thumb.jpg" alt="Buckle close-up">
  </button></li>
</ul>

Many themes and gallery apps generate this markup for you. If yours gives every thumbnail the same alt text, or none, that is worth raising with the theme or app developer.

Lifestyle and decorative images

Ask whether the image tells the shopper something they cannot learn elsewhere on the page. A photo of the backpack on a hiker at sunrise, beside text that already describes the bag, is atmosphere: give it alt="", which the W3C decorative images tutorial recommends for images that "add ambiance or visual interest". A photo showing the bag's size against a person, or what fits inside it, carries information: describe that information.

Never leave the alt attribute off entirely. The W3C notes that some screen readers then announce the file name instead.

Keyword stuffing hurts twice

It is tempting to treat product alt text as an SEO field. Google's image SEO guidance asks for "useful, information-rich content that uses keywords appropriately and is in context of the content of the page" and warns that keyword stuffing "results in a negative user experience and may cause your site to be seen as spam." A screen reader user has to listen to every word of it before reaching the next thing on the page.

• Stuffed: alt="backpack hiking backpack travel backpack laptop backpack best backpack men women"
• Useful to both a listener and a search engine: alt="Olive canvas backpack with brown leather straps and a padded laptop sleeve"

On Shopify and other platforms

On Shopify, alt text is set per image: open the product, click the image in the media gallery and add or edit its alt text. For a large catalog, export products to CSV, edit the alt text columns and re-import. Shopify's product image editor can also suggest an alt text description. A suggestion is a starting point; it is generated once and does not know which variant the photo will end up attached to. Our Shopify accessibility guide walks through each step.

The same rules apply on every platform. See our guides for WordPress, Wix, Squarespace and Webflow for where each one keeps the alt text field.

Using AI to draft product alt text

An AI generator is a fast way to get a first pass on hundreds of images. Our free alt text generator has an "E-commerce" style for product images. Treat every result as a draft:

• Check colors and patterns first. They are what tells a shopper which variant this is, and they are where vision models slip on look-alikes.
• Confirm the variant. A generator sees the image and any context you type, not which listing the photo ends up attached to.
• Cut what does not help choose. Backgrounds, lighting and camera angle can go.
• Decide decorative versus informative yourself. Only you know what the rest of the page already says.

Checking product alt text at scale

Reading alt text in a spreadsheet tells you it exists. It cannot tell you it describes the right photo. Our alt text checker downloads the first six described images on a product page and compares each with its alt text, free and without signup. The deep audit runs the same check, opening up to six images per page, and paid plans repeat it on the pages you nominate so a new import that breaks something gets flagged. The free scan finds missing and filename alt text among its 16 rule-based checks, and our methodology lists exactly what each check can and cannot see. No tool, ours included, can confirm a store meets WCAG; alt text is one criterion of many in the WCAG 2.2 checklist.