Why Image Accessibility Matters
Accessible images ensure that all users, including those with visual impairments who rely on screen readers, can understand and engage with visual content. Proper alternative text and image descriptions create an inclusive digital experience for everyone.
Types of Images and Alt Text Requirements
Informative Images
Convey information or concepts. Alt text should describe the essential information the image communicates.
Decorative Images
Used for visual appeal only. Should have empty alt text (alt="") so screen readers skip them.
Functional Images
Act as buttons or links. Alt text should describe the function, not the appearance.
Complex Images
Charts, graphs, diagrams. Need detailed descriptions in addition to brief alt text.
Alt text should be concise but descriptive, focusing on the purpose and meaning of the image rather than just its appearance.
Good Example
📊 Chart
<img src="enrollment.jpg" alt="Student enrollment increased 15% from 2023 to 2024, rising from 1,200 to 1,380 students">
Screen reader: "Student enrollment increased 15% from 2023 to 2024, rising from 1,200 to 1,380 students"
Avoid This
📊 Chart
<img src="enrollment.jpg" alt="chart">
Screen reader: "chart" (not helpful)
Images used purely for decoration should have empty alt text (alt="") or be implemented as CSS background images to avoid cluttering screen reader output.
Good Example
🌟 Decoration
<img src="decorative-border.png" alt="">
Screen reader: (skips image entirely)
Avoid This
🌟 Decoration
<img src="decorative-border.png" alt="decorative border with stars">
Screen reader: "decorative border with stars" (unnecessary noise)
For images that serve as buttons, links, or interactive elements, describe what happens when activated, not what the image looks like.
Good Example
📧 Button
<img src="email-icon.png" alt="Contact the school office">
Screen reader: "Contact the school office"
Avoid This
📧 Button
<img src="email-icon.png" alt="envelope icon">
Screen reader: "envelope icon" (unclear purpose)
Charts, graphs, and complex diagrams need both concise alt text and detailed descriptions that can be accessed by all users.
Good Example
📈 Complex Chart
<img src="budget-chart.png" alt="2024 school budget breakdown" longdesc="budget-description.html">
Includes link to detailed description with all data points
Avoid This
📈 Complex Chart
<img src="budget-chart.png" alt="colorful pie chart showing different budget categories">
Screen reader: No access to actual data or insights
Aim for alt text under 125 characters. Focus on the most important information that serves the user's needs in context.
Good Example
👥 Students
<img src="graduation.jpg" alt="Class of 2024 graduates receiving diplomas at ceremony">
Concise yet informative (58 characters)
Avoid This
👥 Students
<img src="graduation.jpg" alt="A large group of students wearing black graduation caps and gowns standing on a stage with blue curtains in the background while receiving their diplomas from the principal who is wearing a blue suit">
Too verbose (198 characters) and unnecessarily detailed
Alt text should complement surrounding text, not repeat information that's already provided in nearby content.
Good Example
Article: "Principal Johnson announced the new STEM program..."
👨💼 Principal
<img src="principal.jpg" alt="Principal Johnson in the new science lab">
Avoid This
Article: "Principal Johnson announced the new STEM program..."
👨💼 Principal
<img src="principal.jpg" alt="Principal Johnson announced the new STEM program">
Additional Image Accessibility Tips
- Test your images with screen readers to ensure alt text makes sense in context
- Use ARIA labels and descriptions for complex interactive images
- Ensure images have sufficient color contrast if they contain text
- Provide captions for images when additional context would be helpful
- Consider providing image descriptions in multiple formats (text, audio, video)
- Don't start alt text with "image of" or "picture of" - it's redundant
- For logos, include the organization name in the alt text
