Alt text is the easiest accessibility win you can make — a single attribute that opens your content to millions of screen reader users and earns image-search visibility. Done well, it takes 30 seconds per image. Done badly, it's worse than nothing.
Alt Text Decision Table
| Image Type | Alt Text Approach | Example |
|---|---|---|
| Decorative | Empty alt="" | Background patterns, dividers |
| Functional (link/button) | Describe the action | "Search" not "magnifying glass" |
| Informative | Describe key meaning | "Red warning triangle: backup failed" |
| Complex (chart) | Summarize finding + link to long desc | "Bar chart: 65% chose dark mode" |
| Text in image | Transcribe the text | "50% off — ends Sunday" |
What to Describe
Describe what's relevant in context, not the photograph in detail. A picture of a chef next to a recipe needs "Chef plating finished pasta" — not "smiling man in white jacket with arms raised holding tongs over a white plate next to a blue tile counter." Context determines relevance.
Rules That Always Apply
- Skip "image of" or "picture of" — screen readers already announce it as an image.
- End with a period so screen readers pause before the next element.
- Match the context — same image may need different alt text on different pages.
- Don't keyword stuff. One natural keyword maximum.
- Always set the attribute — empty alt="" is valid; missing alt is not.
Common Mistakes
- Leaving the filename as alt text ("IMG_2034.jpg").
- Marking informative images as decorative to skip them.
- Writing "icon" or "logo" instead of the brand/action.
- Repeating the visible caption verbatim.
- Stuffing keywords for SEO and hurting clarity.
Check Your Page Copy
Make sure surrounding text reads naturally for screen readers too.
Readability Checker →