Image Accessibility Guide
How to make images accessible to all users, including those using screen readers.
Quick Answer
Every meaningful image needs descriptive alt text. Decorative images should have empty alt (alt=""). Complex images (charts, diagrams) need extended descriptions. Color contrast must meet WCAG AA (4.5:1 for text, 3:1 for graphics).
Alt Text Rules
✅ Do
- Describe the image content accurately
- Keep it concise (under 125 characters)
- Include text that appears in the image
- Use empty alt for decorative images
- Describe the purpose, not just appearance
❌ Don't
- Start with "Image of" or "Photo of"
- Keyword stuff for SEO
- Leave alt missing entirely
- Use the file name as alt text
- Describe every detail of complex images
Alt Text by Image Type
| Type | Alt Approach | Example |
|---|---|---|
| Photograph | Describe the scene | alt="Dog playing fetch in a park" |
| Chart/Graph | Summarize the data | alt="Sales increased 40% from Q1 to Q4" |
| Icon | Describe the function | alt="Search" or alt="Close menu" |
| Decorative | Empty alt | alt="" |
| Complex diagram | Brief alt + long description | Use aria-describedby |
Color Contrast
Text and interactive elements must meet WCAG AA contrast ratios:
4.5:1
Normal text minimum
3:1
Large text minimum (18px+)
3:1
UI components & graphics