Alt Text Guidelines
Providing good alt text ensures that users who cannot see images still understand their purpose and content.
Always include alt text for any image that conveys information or has a functional role.
Key Principles
1. Be Concise
Limit to 125 characters or fewer. Screen readers typically stop after this length.
2. Be Specific
Describe what’s relevant. E.g., “Red maple leaf in autumn” rather than “Leaf.”
3. Convey Purpose
If an image is decorative only, use an empty alt attribute (alt="") so it’s skipped by assistive tech.
4. Avoid Redundancy
Don’t repeat information already in nearby text or captions.
5. Include Text
If text appears in the image that’s essential (e.g., button label), include it verbatim.
Decorative images (e.g., background flourishes) should use alt="" or be CSS backgrounds to avoid cluttering assistive tool output.
Examples
| Use Case | Bad Alt | Good Alt |
|---|---|---|
| Informative photo | “Image1.jpg” | “Smiling teacher reading to children in classroom” |
| Button icon | “icon.png” | “Search” |
| Decorative only | “Flower pattern” | “” |
Do not start alt text with “Image of…”—screen readers already announce it as an image.
Quick Checklist
- âś… Is it under 125 characters?
- âś… Does it describe what matters?
- âś… Is decorative content marked
alt=""? - ✅ Did you avoid phrases like “image of” or “graphic of”?