What is alt text (the alt attribute) of an image?

In your store admin it shows up as a small field next to each photo, "Add alt text," and in audits as "images missing alt." Plenty of people call it the "alt tag," but it is not a tag: it is an attribute of the img tag, the text that takes the image's place when the image is not seen. It matters to a store because of two readers at once: the shopper using a screen reader and the search engine trying to understand what is in the photo.

How it works

The HTML specification defines it as the text that acts as an alternative to the image, for whoever cannot see it. The practical rule it proposes is a question: if you removed the image, what text would you put in its place? The cases follow from it:⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images}

• An image that carries information: the text says what it contributes, not what the file is.
• A decorative image, which adds nothing: the attribute is empty, alt="". Empty is not the same as missing: empty tells the machine it can ignore the image.
• An image that is the only content of a link or a button: the text describes where it leads or what it does, not the drawing.
• An image with a caption next to it: the alt text does not repeat the caption.

The W3C's accessibility guidelines (WCAG 2.2) make it a level A requirement, the most basic: all non-text content that is presented to the user has a text alternative that serves the equivalent purpose, and what is purely decorative is marked so that assistive technologies can ignore it.⁠^{[2]W3C, Web Accessibility Initiative. Understanding Success Criterion 1.1.1: Non-text Content (WCAG 2.2)}

What Google does with it

Google explains that it uses alt text, along with computer vision algorithms and the contents of the page, to understand what an image is about. If the image is a link, the alt text works as the link's anchor text. What it asks for is useful, information-rich text that uses keywords appropriately and in the context of the page.⁠^{[3]Google Search Central. Google image SEO best practices} Its example, with a photo of a puppy, goes from worst to best: no attribute; a string of words like "puppy dog baby dog pup pups puppies doggies"; "puppy"; and, best, "Dalmatian puppy playing fetch." About the string it warns that it results in a negative user experience and may cause your site to be seen as spam.⁠^{[3]Google Search Central. Google image SEO best practices}

There is a second Google rule that affects stores that generate text in bulk. Its guidance on AI-generated content asks you to review everything generated by hand before publishing it, and extends that review to metadata, including the alt text of images, because it can appear in search results.⁠^{[4]Google Search Central. Google Search's guidance on using generative AI content on your website} A model that describes a photo badly produces an AI hallucination just as if it got the product description wrong.

In a store

A fictional example: the product page of a camera backpack, with four images.

In the code, the difference between the last two rows is this:

<img src="backpack-dimensions.png" alt="Exterior dimensions: 12 × 7 × 18 in, weight 3 lb" />

<img src="divider.svg" alt="" />

In Shopify, each product image's alt text is written from the file preview, on the product page in the admin. The field takes up to 512 characters, and Shopify recommends staying at 125 or fewer, with brief, descriptive text.⁠^{[5]Shopify Help Center. Adding alt text to product media}

How to check it

1. Open a product page's source code and search for <img. Every image should have alt: with text if it informs, empty if it decorates.⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images}
2. Separate the three cases: no attribute, empty and with text. An image with no attribute is a failure; an empty one is a decision.
3. Read the texts aloud without looking at the photos. If you would not know which product it is or what each image shows, the text does not stand in for the image.
4. Look for images with text inside, like size or dimension charts: that information has to be in text as well.
5. If an AI wrote the texts, review a sample by hand before publishing them.⁠^{[4]Google Search Central. Google Search's guidance on using generative AI content on your website}

Related concept: caption and meta title

Alt text gets confused with other texts around an image. The caption is seen on the page, next to the image, and the HTML specification asks that the alt text not repeat it: each does a different job.⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images} The file name does not count as alt text either: in Google's example, an image with its file and no attribute is the bad case.⁠^{[3]Google Search Central. Google image SEO best practices} And none of them is the meta title, which does not describe an image but the whole page.

To keep going, the catalog and entities reading path orders the rest of the product page terms.