Write Useful Alt Text for Website Images and Buttons
Choose image alternatives based on the information or function an image adds, not on keyword stuffing.
What is the problem?
Alternative text should communicate what would be missing if a reader could not see an image. It is not a keyword dump. The right description depends on whether the image informs, decorates or performs an action.
Step-by-step solution
Distinguish informative images from decoration
W3C WAI advises short meaningful descriptions for informative images, while purely decorative images can use an empty alt attribute when no information is lost.
Describe what image-based buttons do
A printer icon acting as a button should communicate 'Print' rather than merely 'picture of printer'. Avoid duplicating nearby text when it already communicates the same purpose.
Provide surrounding explanations for complex charts
A graph may need a short alt summary plus detailed data in nearby text or a table. Test the reading order with assistive technology rather than assuming a short description conveys the full result.
Alternative method
Pure decoration can be handled through CSS backgrounds or empty alt text. More words are not automatically more accessible.
Known limitations
Irrelevant keyword repetition and misleading descriptions undermine accessibility. Update text alternatives when the picture or its role changes.
Frequently asked questions
No. W3C WAI recommends empty alt text for purely decorative content, provided it carries no information or function needed by readers.
Official primary sources
This article uses the official references below; consult them for the full guidance.
