Alt text is a decision, not a description

Here is the advice most people get about alt text: describe the image. It is not wrong, exactly. It is incomplete in a way that produces alt text nobody can use.

Take one photograph of a red kettle on a stove. Put it on five pages.

An online shop. The shopper wants to know what the photo tells everyone else: the color, the finish, the shape of the handle and spout. The name and price are already in the text. Alt: "Red enamel stovetop kettle with a black handle and a short angled spout."

A recipe. The photo illustrates one step, water heating. The color of the kettle is irrelevant. The steam is the point, because the sentence next to it is about temperature. Alt: "A stovetop kettle on a burner, steam rising from the spout."

A safety notice. The notice says the handle stays cool and the body does not. The alt should point at exactly those parts. Alt: "Kettle with the cool black handle on top and hot steam leaving the spout at the side."

A decorative banner. The photo is mood beside a heading that already says "Welcome to the tea room." A screen reader user gains nothing from hearing "red kettle" between the heading and the opening hours. Alt: empty. alt="" is a deliberate instruction to skip.

A portfolio. Now the image is the content. The visitor came to see how it was made. Alt: "Close-up photograph of a red enamel kettle on a lit gas burner, steam curling from the spout, soft window light and a shallow depth of field."

Five pages, one image, five alts, and one of them is nothing at all. The Alt Text Studio lets you write all five and compare.

The question

Before you write a word, ask: what does a sighted reader learn from this picture, here, that they would miss without it?

Sometimes the answer is "the color." Sometimes it is "which step we are on." Sometimes it is "nothing, it is decoration." The alt is the answer to that question. It is a decision about the page, and the pixels cannot make it for you.

Habits that make alt text worse everywhere

• Starting with "image of." The screen reader already said "image." Now the reader hears it twice.
• Repeating the caption or the heading. The reader just heard it. Say what the picture adds, or say nothing.
• Using the file name. A missing alt attribute falls back to kettle-final-v3.jpg. That is what your reader hears when you forget.
• Describing everything. Alt text is read in one breath and cannot be paused or scrolled. If a detail matters, it belongs in the text next to the image, where it can be navigated.
• Writing the same alt for every use. The image did not change. What the reader needs from it did.

For charts and diagrams

The alt is a one-sentence summary of the point: "Signups rose from 120 in January to 410 in June." The data goes in a real table next to the image. An alt that tries to hold twelve numbers is unusable.

Try it

Open the studio. Write the five alts. The lab will tell you if you wrote the same one twice.

Open the companion lab