How to Write Useful Alt Text

Alt text communicates purpose

Useful alternative text gives a person who cannot see an image the information or function that the image contributes to the page. It is not a visual inventory and it is not a place to repeat a caption word for word.

The same image can need different alt text in different contexts. A photo of a wet street might illustrate weather in one article, identify a location in another, and be decorative on a landing page.

Decide whether the image needs words

Ask these questions in order:

1. Does the image perform an action as a link or button? Describe the action or destination.
2. Does it communicate information that is not available nearby? Describe that information briefly.
3. Is it a chart or complex diagram? Provide a short identification and put the full data or explanation in the surrounding content.
4. Is it decorative or redundant with nearby text? Use an empty alt="" so assistive technology can skip it.

The W3C alt decision tree provides a practical version of this process.

Write for the surrounding sentence

Read the paragraph with the proposed alt text in place of the image. The result should make sense without announcing file mechanics. Phrases such as “image of” or “picture of” are usually unnecessary because a screen reader already identifies an image. Mention the medium only when it matters, such as a map, illustration or screenshot.

Prefer concrete information over mood-only adjectives. “Red hiking backpack with a front bungee cord” helps a shopper more than “beautiful premium product.” Do not infer identity, disability, emotion or sensitive traits unless the context establishes them and they are relevant.

Examples by purpose

Product image

Weak: Backpack product image

Useful: Red 28-liter hiking backpack with front bungee cord and two side pockets

Functional icon

If a magnifying-glass image is the only content of a button, describe its action: Search. Do not describe its shape.

Article photograph

For an article about flood damage: Water covering the ground floor of three homes after the river overflowed.

Decorative texture

Use an empty alternative: alt="". Leaving the attribute out can cause some assistive technology to announce the filename.

Chart

Use a concise label such as Monthly support requests rose from January through April, then provide exact values in nearby text or a data table.

Text inside images

Important words that exist only inside an image need an equivalent. When the same words already appear next to the image, repeating all of them may create a frustrating duplicate. Logos often use the organization name as alt text; a linked logo may be better described by its destination, such as Image Toolkit home.

Use AI as a draft, not the final authority

An image model can identify objects and propose a sentence, but it cannot know why the author placed the image on the page. It may also miss small text or confidently invent a detail.

A safe workflow is:

1. Generate a draft description.
2. Compare every claim with the image.
3. Remove irrelevant visual detail.
4. Add the page-specific purpose.
5. Choose empty alt text if the image is decorative.
6. Review the page with images disabled or a screen reader.

Final checklist

• Does the text convey the image function or useful information?
• Is it concise without omitting the central point?
• Does it avoid repeating the nearby caption?
• Are names, numbers and visible words accurate?
• Is a longer explanation available for complex graphics?
• Would alt="" be better for a decorative image?

The goal is an equivalent reading experience, not a perfect description of every pixel. The W3C HTML alt technique is a useful reference when implementing the result.