How to write useful alt text for images
Decide when an image needs a description, an empty alt attribute or a longer explanation, with practical accessibility examples.
Tervix · practical guide
Describe the image's purpose in this context, not the image in isolation. First decide whether it is informative, functional, complex, redundant or decorative.
Alternative text is not a caption generated by listing every visible object. It supplies the meaning or function a reader would miss when the image is unavailable. The same image can need different text—or an empty alt attribute—depending on why it appears on the page.
1. Decide whether the image adds meaning
Ask what information would disappear if the image did not load. If a photograph supports the story, briefly communicate the relevant subject or action. If nearby text already communicates the same information and the image adds no function, an empty alt attribute can prevent needless repetition.
Decorative images still need an alt attribute in HTML, but its value should be empty: alt="". Omitting the attribute can cause assistive technology to announce a file name, which is usually worse.
2. Write for the surrounding sentence
Good alt text completes the page's communication. A photo of a crowded bus might be described as “Passengers standing in a crowded city bus” in an article about capacity, but the route number may be the important detail in a service alert.
Avoid opening with “image of” or “picture of” unless the medium itself matters. Keep the description concise, use normal punctuation and do not repeat a caption word for word.
3. Describe actions for functional images
When an image is the only content of a link or button, describe the action or destination rather than its appearance. A magnifying-glass icon in a button needs an accessible name such as “Search,” not “magnifying glass.” A linked logo can identify the destination as the organization's home page.
The accessible name may come from alt text, visible text or an ARIA label depending on the component. Avoid combining mechanisms that cause the same name to be announced twice.
4. Provide the information behind complex images
A chart, map or process diagram often contains too much meaning for one short attribute. Use concise alt text to identify the graphic, then provide the data, conclusion or extended explanation in nearby text or a clearly associated section.
Do not force every data point into the alt attribute. Give readers equivalent access to the important relationships and provide a table when exact values matter.
Chart pattern
- alt: “Monthly sign-ups increased from January to April.”
- Nearby text or table: exact values and interpretation
5. Review without looking at the image
Read the page using only the text and proposed alternative. Can a reader understand the same task, conclusion or link? Remove details that do not contribute and add information that the surrounding text assumes.
Automated suggestions can create a draft, but context requires editorial judgment. Product images, diagrams, screenshots and images containing text should be checked by someone who understands the page's purpose.
Final checklist
- ✓Identify purpose and context.
- ✓Use alt="" for truly decorative images.
- ✓Describe function for linked controls.
- ✓Avoid repeating nearby text.
- ✓Explain complex information outside the attribute.
- ✓Use punctuation and concise language.
- ✓Review the page without the image.
Open the alt text drafting tool
Structure a context-aware draft locally, then review it against the purpose of the page.
Open toolSources and review
Reviewed July 29, 2026 against W3C WAI image guidance. Final alternative text requires knowledge of the image's purpose and surrounding content.