Alt text best practices and examples
A short, practical guide to writing alt text that works for screen reader users, satisfies WCAG 2.1 AA, and helps search engines understand your images.
What is alt text?
Alt text (alternative text) is the description inside an image’s
alt attribute. Screen readers announce it to blind and low-vision
users, search engines use it to understand images, and browsers show it when an
image fails to load. Without it, a screen reader user hears only “image”
— or worse, the file name.
The rules that matter most
Examples: good vs bad
Same image, three different treatments:
No alt attribute at all. Some screen readers announce the file name (“chart png”); others say nothing. Either way, the reader gets nothing.
Technically valid, completely useless — it describes nothing.
This works: specific, concise, and it answers “what does this chart show?” The right description depends on context — on a news article about growth you might write less; on a data-analysis page, more.
More examples by context
The last one is decorative — it adds mood, not meaning — so its alt is empty on purpose.
When images carry text
If an image contains text (a chart title, a banner, a diagram label), that text should appear in the alt attribute. Screen reader users need the same words sighted readers see.
Complex images
Charts, diagrams, and infographics may need a short alt plus a longer description nearby (a caption, a linked page, or adjacent text). The alt attribute is the summary; the longer explanation lives nearby.
Quick checklist
Where AltVision fits
Writing good alt text by hand is slow, especially across a large site. AltVision generates context-aware alt text suggestions for any image using AI — you review, edit if needed, and paste. It is built for keyboard and screen reader users first, and it supports multiple languages.