On a product page, the photo does most of the selling. It shows the colour, the shape, the size and the finish, often more clearly than the description does. For a shopper using a screen reader, all of that comes from one short piece of text attached to the image: its alternative text, or alt text.

In WebAIM's 2026 study of a million home pages (external site), images without alt text were the second most common accessibility failure, found on 53.1% of them. On a store, nearly every page is built around photos, so every one of those gaps costs something. It is also one of the easiest problems to fix, because all it takes is a few words.

What happens without it

When a screen reader reaches an image, it announces that there is an image and reads its alt text. When there is none, it has to guess. WebAIM notes (external site) that a screen reader may fall back to reading out the file name, which on a store usually sounds like "IMG underscore 4471 dot JPG", or skip the image altogether.

Either way, the shopper is left with the product name and whatever the description happens to say. If the description assumes you can see the photo ("as shown", "pictured in blue"), they are left guessing.

Write what a shopper needs to know

Good alt text for a product photo answers the questions the photo answers for everyone else. Take the mugs at the top of this page. Three versions:

  • Missing: the screen reader reads a file name, or nothing.
  • Too thin: "Mugs."
  • Useful: "Two tall porcelain mugs with a pale green crackle glaze, standing side by side on a small dark tray."

The useful version tells you how many there are, what they are made of, their shape and their colour, which are the things a buyer actually weighs up. Screen readers already announce that it is an image, so starting with "Image of" or "Photo of" only adds words.

A few habits that help:

  • Lead with what matters. Put the product and its defining detail first. People often move on after the first few words.
  • Describe what the photo adds. If the product name above already says "Celadon porcelain mug", the alt text can focus on what the name leaves out: the crackle glaze, the tall shape, the pair.
  • Make each photo in a gallery different. A product with five photos needs five different descriptions: "Front view", "Close-up of the crackle glaze", "The mug held in one hand, to show its size". Five copies of the product name tell a screen reader user nothing new.
  • Include text that appears in the photo. If an image shows a size chart, a care label or a slogan printed on the product, that text belongs in the alt text, or on the page as real text.
  • Keep it short. A sentence is usually plenty. Shopify recommends 125 characters or fewer, and WebAIM says that only a few words are typically needed, rarely more than a short sentence or two.

Images that should stay silent

Some images carry no information: background textures, decorative dividers, a stock photo of a smiling customer used as mood. These should have an empty alt text, written in the code as alt="". That tells the screen reader to skip them, which is better than announcing "image" with nothing to say.

The W3C's decision tree for images (external site) is a good way to settle the unclear cases. It asks, in order: does the image contain text, is it inside a link or button, does it add meaning to the page, and is it purely decorative. Two cases catch stores out most often:

  • Images inside links and buttons. A cart icon, a logo that links to the home page, a product thumbnail that opens the product. Here the alt text should say where the link goes or what the button does ("Your cart", "Home"), because it is the only label the link has.
  • Images that repeat nearby text. If a product card shows a thumbnail with the product's name written right under it, the thumbnail can stay silent, since the name is already right there.

Where to add it

Shopify. In your admin, go to Products, open the product, and click a photo or video to open its preview. Choose Add alt text, write your description, and click Save alt text. Shopify's help page (external site) has the details. Images used elsewhere in your theme, such as banners and collection images, are set in the theme editor instead.

WooCommerce. Product images live in the WordPress media library. Open Media, select the image, and fill in the Alternative Text field. Most themes use it automatically wherever the image appears.

If a scan still reports missing alt text after you have filled these in, the theme itself may be printing the image without it. That is a one-line fix in the theme file, and usually one fix covers every product.

Where to start

Describing a whole catalogue takes a while, so start with your best-selling products and your home page, then work through the rest a collection at a time. Every photo you describe is a product that one more customer can actually see.

Sources