Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

How to Make Digital Assets Accessible: Images

A resource to help you create accessible digital assets for your course

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 TextTraining document on best practices for using images and creating alt text.

Microsoft: How to add alternative textGuidance 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.

Canvas Tip of the Week: Alt Text

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:

Additional Resources

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

CONTACT

Email Butler University Libraries
Irwin Library: 317-940-9227
Science Library: 317-940-9937
CAT: 317-940-8575

Like us on FacebookInstagramFollow us on Twitter