Images: Making Visual Content Accessible
Images can add clarity, emotion, and context to your content—but they must be used accessibly to ensure everyone can understand their purpose. Whether you're using photos, icons, infographics, or decorative flourishes, how you present and describe them matters.
Write Effective Alt Text
Alternative text (alt text) is a short description of an image’s content and purpose. Screen readers read this aloud so users who are blind or visually impaired can understand what the image conveys.
Best Practices:
- Be concise but descriptive.
- Focus on the image’s function in context.
- Skip unnecessary details.
- Don’t start with “Image of…”—screen readers already announce it’s an image.
Example:
<img src="team-photo.jpg" alt="The customer support team smiling at their desks">
If the image is a link or button, describe the action, not the visual.
Example:
<a href="/donate">
<img src="donate-button.png" alt="Donate now">
</a>
When to Use Decorative Images
Some images are purely aesthetic and don’t convey important information. These should be marked as decorative so screen readers skip them, reducing unnecessary noise for users.
How to mark decorative images:
<img src="divider.png" alt="" role="presentation">
- Use an empty
alt=""attribute to hide decorative images. - Optionally add
role="presentation"for older assistive tech.
When is an image decorative?
- It adds visual flair but no meaning.
- It doesn’t aid in understanding the content.
Avoid Text Embedded in Images
Screen readers can’t read text that’s part of an image file. If you must use text in an image (e.g., a chart with labels), always provide the same information in nearby HTML or as part of the alt text.
Bad:
- Image of a flyer with event details but no accompanying text.
Good:
- Same flyer image, but with all event details listed in the HTML nearby.
Pro Tip: Use SVG or HTML/CSS for stylized text whenever possible.
Image Types and How to Handle Them
| Image Type | Alt Text Strategy |
|---|---|
| Informative photo | Describe what it shows |
| Functional image | Describe the action (e.g., “Search”) |
| Decorative element | Use alt="" |
| Complex chart/graph | Summarize key takeaway in alt text + provide full description in surrounding text or a linked long description |
Quick Checklist
✅ All images include appropriate alt text
✅ Decorative images have empty alt=""
✅ No essential text is embedded inside images
✅ Complex images have full descriptions nearby
✅ Functional images describe their purpose