Module 4: Images

Text 4 Images

Images of various kinds present a serious barrier to access by users with visual disabilities. Many blind and low-vision individuals use screen readers (JAWS, NVDA, VoiceOver) to read webpages aloud to them, and those technologies cannot interpret images. In order to provide screen reader programs with the necessary information to describe graphic images, text alternatives should be provided in the form of alternative text.

Alternative text may be tagged in HTML using the alt attribute; it may also be added as part of the surrounding text.

Infographics should be accompanied by a tabular representation of the data as well as a text description of what the graph or chart represents.

Alternative Text

You can attach alternative text (or "alt text") to an image using by the HTML alt attribute. Alternative text added in this way is read aloud by screen readers like JAWS and VoiceOver when they come to the image in the document.

Here's a section of a document that contains an untagged image of a DNA strand.

screenshot of a document with an image of a DNA strand

This is how it sounds when read aloud by a screen reader.

If you upload an image directly into Canvas without adding alternative text, the system may not prompt you to add one. View the How do I embed images from Canvas into the Rich Content Editor? Links to an external site. guide for detailed instructions on how to add alt text to an image.

There are several ways to add alt text to an image in a Word or PowerPoint file. The simplest is to right-click the image and select "Add alt text" from the drop-down menu.

Enter your text in the Description field.

Screenshot of Word document with title and description fields filled in

Entering text in the Title field is optional. It provides information about the image that appears when a user mouses over it.

Tips for Creating Good Alternative Text

Keep it brief and to the point. A good rule of thumb is to make your alt text short enough for a Tweet.
Don't say "picture of" or "image of." The screen reader will do that for you.
Include context for the picture. How does it relate to the page where it appears? What does it illustrate?
If an image is purely decorative, enter "decorative" in the alt text field. (It also works to leave the field blank, but this will cause the image to be flagged as an error by accessibility-checkers.)
Don't repeat alt text for multiple images.

Infographics

The visual representation of quantitative or illustrative information can present some unique accessibility challenges. Unfortunately, not all infographics can be made fully accessible, and it's good to bear that in mind when creating your course materials--particularly in creating test questions.

When creating an infographic, consider the following groups:

Blind users who use a screen reader or Braille keyboard
Users with a cognitive disability who may use text-to-speech software
Users with low vision who use magnifiers or no assistive technology at all

The most important step in making an accessible infographic is to include a long alternative text description which conveys verbally the information presented in the graphic. The best location for this information is in the document itself, or in a separate document with a link that leads to it.

While there is an HTML longdesc attribute, it's not an optimum solution, because it is accessible only to screen readers. The information remains hidden for other users who could benefit from the long description.

Tips for Creating Accessible Infographics

Provide a thorough alternative text description.
When possible, include the data on which the graphic is based in tabular format.
Make sure that the elements of your graphic show sufficient color contrast. Use a site like the WebAIM Color Contrast Checker (Links to an external site.) to evaluate your colors.
If your graphic contains text elements that can be accessed by a screen reader, end each element with a period (full stop). Otherwise, the screen reader will read all of the labels as one sentence.