Research Guides (LibGuides): How to Make Digital Assets Accessible: Images

Images for teaching and learning must have alternative text provided, which visually describes essential information so that people with disabilities using assistive or adaptive technology can access the information. Contact CAT at 940-8575 or email us at cat@butler.edu if you need assistance with creating alternative text for images.

Get Started

New! Ally: Add Image Descriptions
Use the Ally tool in Canvas to find images that need alt text and to add alt text or mark images as decorative.
WebAIM Techniques
Alternative Text: Training document on best practices for using images and creating alt text.
Microsoft: How to add alternative text
Guidance from Microsoft support website on adding alternative text in Office products.

Accessibility Guidelines for Images

This is an overview of the elements that require special consideration when using images. Please review one of the Additional Resources for detailed instructions on any of the following:

Provide alternative text for images that convey content. Use accurate and equivalent descriptions.
Describe the image thoroughly but succinctly. The text should describe the content and function of the image.
Do not use the phrases "image of..." or "graphic of..." since screen readers already provide this information.
Do not be redundant or provide the same information as the text accompanying the image.
Decorative images do not require long descriptions and should be "nulled" or left untagged as an image.
Avoid flashing images. These may cause seizures for students with photosensitive epilepsy and may be distracting for students with learning disabilities.

Infographics

Infographics are often flat images that contain an abundance of both text and visual information. Therefore, they need special accessibility considerations. See the Infographics page of this LibGuide for more information.

Understanding Alternative Text

Inserting an Image & Alt Text in Canvas

Google Docs Alt Text

Accessibility Check

Use these resources to assess whether your documents are accessible:

Ally File Accessibility Score & Issues: Ally ranks your document with a score of Low to High accessibility and shows you how to fix issues.
Section 508 Accessible Document Testing Guides and Checklists.
WebAIM WCAG 2 Accessibility Checklist.
Microsoft Office built-in Accessibility Checker. (Learn about the rules used by the Accessibility Checker.)
WebAIM Color Contrast Checker.
Adobe Color Accessibility Tool

Additional Resources

WebAIM: Accessible Images
This article outlines strategies beyond alt text for making images accessible.
Diagram Center Image Description Guidelines
The Diagram Center strives to ensure that accessible educational material is created, published and available for all types of disabilities and learning styles. This resource provides general guidelines as wells as specifics for difficult images like diagrams, maps, graphs, etc.
WCAG Guideline 1.1 Text Alternatives
Description of the WCAG guidelines for alt text
Improve Accessibility with Alt Text
Learn how to add alt text in Word from Microsoft Support

Examples

Examples from POET

POET Training Tool Examples: Walk through six general guidelines for image descriptions followed by specific guidelines for more complex images like diagrams, art, graphs, maps, and more.

Examples from CAST*

black and white photo of a woman and two children

"Migrant Mother" from the Library of Congress. (More image information)

Images, like "Migrant Mother", can help students make contextual and powerful emotional connections to course content that might otherwise seem irrelevant. Historical events gain a human face that help students make connections to current situations. This photograph is freely available from the Library of Congress.

diagram of a plant cell structure

Diagram of a plant cell structure from the Public Domain https://en.wikipedia.org/wiki/Plant. (More image information)

This diagram of a plant cell can convey information more efficiently and effectively than text. Images like charts, diagrams, illustrations and graphs can support understanding of large complex systems and data more clearly and easily than text.

Mark Anderson's resume infographic

Source: Resume Infographic by Bart Claeys is licenced by CC BY-NC-ND 4.0 (More image information)

The infographic above is complex and contains a great deal of text. The long description for the image conveys the main parts of the infographic because the details are not necessary to understanding the infographic in this context. If the purpose of the infographic was to convey the details, a full description and reconstruction of the embedded text would be necessary.

photo and diagram of a robotic arm

Example image from Module 9: Industrial Robots in the STEM Readiness course by CAST is licensed under CC BY 4.0. (More image information)

The example image above demonstrates the use of alt text and one model of how to include long description for a complex image.

Alt Text: A dual image containing both a photograph and a diagram of a robotic arm. Below the arm is a board with lines crossing the center. The robotic arm is touching the board in the lower left quadrant. The horizontal line in the photograph is labeled x, and the vertical line is labeled y.

*Images from UDL On Campus by CAST is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

How to Make Digital Assets Accessible: Images