Best Practice
Beginner
1 min read
197 words
Image Accessibility Best Practices
Make images accessible to all users including those using screen readers, braille displays, and assistive technologies. Learn WCAG guidelines for alt text, decorative images, complex graphics, and color contrast.
Key Takeaways
- Every meaningful image must have an `alt` attribute that describes its content and purpose.
- 1.1.1 Non-text Content** (Level A): All images need text alternatives
- ## Alt Text Fundamentals Every meaningful image must have an `alt` attribute that describes its content and purpose.
Featured Tool
Compress Image
Reduce image file size while keeping quality.
Alt Text Fundamentals
Every meaningful image must have an alt attribute that describes its content and purpose. Screen readers announce this text to users who cannot see the image.
Alt Text Guidelines
| Image Type | Alt Text Approach |
|---|---|
| Informative photo | Describe content: "Golden retriever playing fetch in a park" |
| Functional icon | Describe action: "Search" or "Close menu" |
| Decorative | Empty alt: alt="" (screen reader skips it) |
| Complex chart | Brief alt + detailed text description nearby |
| Text in image | Include the full text in alt |
WCAG Requirements
- 1.1.1 Non-text Content (Level A): All images need text alternatives
- 1.4.5 Images of Text (Level AA): Avoid text in images when possible
- 1.4.11 Non-text Contrast (Level AA): UI graphics need 3:1 contrast ratio
Common Mistakes
- Starting alt text with "Image of" or "Picture of" (redundant)
- Using file names as alt text ("IMG_4523.jpg")
- Stuffing keywords into alt text (hurts SEO and accessibility)
- Missing alt on meaningful images (WCAG Level A failure)
- Adding alt text to purely decorative images (adds noise for screen readers)