Alt Text Studio

Before you start

Most alt text advice reads like a description exercise: say what is in the picture. That advice produces alt text that is accurate and useless. A screen reader user on a product page does not need to know the kettle is "on a stove." They need to know what color it is and what the handle looks like, because that is what the photo is telling everyone else.

Alt text is a decision about the page, not a description of the pixels. The same image needs different alt text in a shop, in a recipe, in a safety notice, as decoration, and in a portfolio. Below is one illustration placed in each of those. Write what each page needs.

What you just learned

• Context first, pixels second. Ask what the image is doing on this page. The answer decides what the alt says, and sometimes decides that it says nothing.
• Do not repeat the page. If the name, price, or caption is already in the text, the alt carries what is missing, not what is already there.
• Empty alt is a real choice. alt="" tells a screen reader to skip the image. For decoration, that is the kind option. For anything that carries meaning, it is a hole in the page.
• No "image of." Screen readers already say "image." The prefix just makes the reader hear it twice.
• Length follows purpose. A portfolio piece earns a longer, visual alt. A step in a recipe earns a short one. There is no right length, only a right amount.

About the picture

The kettle is an inline vector drawing made for this lab, so there is no photograph, no license, and no real product behind it. The file name a screen reader would fall back to without alt text, kettle-final-v3.svg, is invented too. It is there to show what the reader hears when the alt is missing rather than empty.