Alt Text That Actually Helps: Writing for the Image, Not the File Name

A product photo has alt text that reads IMG_4821_final_v2.jpg. The screen reader announces the file name, the user learns nothing about the product, and the developer who wrote it thought the job was done because the attribute was present. Alt text is not the attribute. It is the words inside it.

Write for the image, not the file name

Alt text is the image's purpose, in words, for the person who cannot see it. A product photo's purpose is to show the product, so the alt text names the product and the features that matter: black leather tote with a top zip and an interior laptop sleeve. A decorative flourish's purpose is nothing, so it gets an empty alt attribute and the screen reader skips it. A chart's purpose is the trend, so the alt text states the trend, not the colors of the bars. The test is simple: read the alt text aloud and ask whether the person listening knows what the image was for. If they know the file name, the alt text failed.

WCAG 1.1.1, Non-text Content, Level A, is the criterion: all non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Equivalent purpose is the phrase that matters. The alternative does not have to describe the image. It has to do the image's job.

The three decisions

Every image needs one of three decisions. Informative: the image carries information, so it gets alt text that carries the same information. Decorative: the image carries no information, so it gets an empty alt attribute and is skipped. Functional: the image is a link or a button, so the alt text describes the destination or the action, not the picture. A search icon that links to the search page gets Search, not magnifying glass. A logo that links home gets the company name, not the logo description. The placeholder that pretends to be a label is the same mistake in a different element: something that looks like it carries information, and does not.

Complex images need a fourth decision. A chart or an infographic cannot fit its information into alt text, so it needs a long description: a table or a summary next to the image, with the alt text pointing to it. The alt text says what the chart shows. The description says what it means.

What not to write

Do not write image of. The screen reader already announces that it is an image. Do not write the file name. Do not stuff keywords into alt text for search engines; it reads as spam to the screen reader user and it does not help rankings. Do not write click here, because the alt text of a linked image is the link text, and click here says nothing about where the link goes. And do not write the same alt text on every product photo. If ten products all have the alt text product image, the user cannot tell them apart, which is the same failure as having no alt text at all.

The test

Turn the images off in the browser and read the page. If the page still makes sense, if the products are still identifiable, if the links still say where they go, the alt text is doing its job. If the page is full of file names and image ofs and blank spaces where information used to be, it is not. The error state that relies on color alone fails the same test in a different sense: information carried by only one channel is information half the users never receive. Alt text is the second channel for images, and it has to carry the whole message.

Frequently asked questions

Does every image need alt text?

Yes. Every image that conveys information needs alt text, including product images, charts, and diagrams. The only images that do not need it are purely decorative ones, which take an empty alt attribute, alt equals empty string, so the screen reader skips them.

Should alt text start with image of?

No. A screen reader announces that it is an image, so writing image of is redundant. Write what the image shows or does, not what it is. A product photo gets the product and its relevant features. A chart gets the trend it shows.

What alt text does a linked image need?

For a linked image, the alt text should describe the link destination or action, not the image. A search icon that links to the search page gets alt text Search, not magnifying glass. The alt text is the link text.

Do charts and infographics need more than alt text?

Yes, and they need a text alternative that carries the same information, usually a table or a summary of the trend next to the chart. Alt text alone cannot carry a complex chart. The long description is the alternative, and the alt text points to it.