Overview
Images, charts, graphs, illustrations, and other visual content can help communicate information, reinforce key messages, and improve engagement. However, visual information must also be available to people who cannot see the content or who use assistive technologies.
Accessible images ensure that all users can understand the information being presented, regardless of how they access digital content.
This page introduces the essential practices for creating accessible images and graphics.
Alternative Text
Alternative text (alt text) provides a text alternative that communicates an image's purpose or meaning.
Screen readers announce alternative text to users who cannot see the image, making the image's purpose or meaning available through speech or braille output.
Good alternative text:
- Conveys the purpose of the image
- Reflects relevant information
- Considers the surrounding context
- Is concise and meaningful
Example:
Image: A Master Gardener volunteer demonstrating proper pruning techniques during a community workshop.
Alt text: Master Gardener volunteer demonstrating pruning techniques during a gardening workshop.
The goal is not to describe every visual detail. Instead, focus on the information the image contributes to the content.
Consider Context
The same image may require different alternative text depending on how it is being used.
For example, a photograph of a drought-tolerant landscape might be described differently depending on whether the page discusses:
- Landscape design
- Water conservation
- Native plants
- Program activities
Alternative text should support the purpose of the surrounding content.
Decorative Images
Some images provide visual interest but do not convey important information.
Examples may include:
- Decorative backgrounds
- Divider graphics
- Visual flourishes
- Stock photography that does not contribute meaning
Decorative images generally should not receive descriptive alternative text.
When decorative images are announced unnecessarily, they can create noise and make content more difficult to navigate.
Avoid Images of Text
Whenever possible, present text as text rather than embedding it within an image.
Examples include:
- Event information
- Instructions
- Contact information
- Headlines
- Important announcements
Text embedded in images may not resize properly, may be difficult to read, and may not be available to assistive technologies.
If text must be included in an image, ensure the same information is also available in accessible text.
Charts and Graphs
Charts and graphs present information visually and often require more than simple alternative text.
Users should be able to access the same information without relying solely on the visual presentation.
When creating charts and graphs:
- Provide a clear title.
- Explain key findings in surrounding text.
- Identify trends or conclusions.
- Avoid relying solely on color to distinguish information.
- Ensure labels are meaningful and understandable.
Consider what information users would miss if they could not see the chart and provide that information in text.
Infographics
Infographics often combine images, charts, icons, and text into a single visual.
Because infographics may contain substantial information, brief alternative text is often insufficient.
When using infographics:
- Provide a concise description.
- Make the full content available elsewhere on the page.
- Ensure important information is available as text.
- Avoid placing critical information only within the graphic.
Users should be able to access all essential information without viewing the infographic itself.
Color and Visual Design
Color should not be the only method used to communicate meaning.
Examples to avoid:
- Red text indicating errors without additional explanation
- Green text indicating success without labels
- Color-coded categories without accompanying text
Best practices include:
- Providing labels or symbols in addition to color
- Using sufficient color contrast
- Ensuring information remains understandable in grayscale
- Testing materials with accessibility tools where appropriate
For additional guidance, review Color & Visual Design.
Images in Documents, Email, and Social Media
Image accessibility applies across all digital content types.
When publishing images:
- Include alternative text where supported.
- Ensure embedded text is readable.
- Provide context when needed.
- Make visual information available in text form.
This includes:
- Websites
- PDFs
- Word documents
- PowerPoint presentations
- Email communications
- Social media platforms
Common Mistakes
Common accessibility issues include:
- Missing alternative text
- Alternative text that is too vague
- Alternative text that is overly detailed
- Images used to communicate essential text
- Charts without explanatory text
- Reliance on color alone
- Infographics without text alternatives
Before Publishing
Before publishing an image or graphic, consider the following questions:
- Does the image need alternative text?
- Does the alternative text communicate the image's purpose?
- Is important information available as text?
- Are charts and graphs explained in surrounding content?
- Is information available without relying on color alone?
- Is the graphic understandable to users who cannot see it?
Accessibility review is most effective when incorporated into normal content creation and publishing workflows.
Addressing these issues helps ensure that visual content can be understood by the widest possible audience and improves accessibility for a broad range of users.