D7 - Images (alt text)

For Reviewers

Checking Alt Text

PopeTech will alert to suspicious alternative text, and the slider permits editing or marking the image as decorative. Both Canvas and Pope Tech will alert if the file type is included (e.g., ".jpg") but if no file type is included, you may get a "green" indicator even though the alt text is inaccurate.  

The WAVE tool allows you to see the alt text for an image, and will also alert you if the alt text is likely insufficient or contains extraneous words (which often means it includes "image of").

NOTE: Currently (Apr. '21) there is a glitch with the decorative image checkbox in the Canvas RCE. If the box is checked and there is default text in the alt text field (file type, for example), a screen reader may not interpret the image as decorative. Any text should be deleted from the alt text field if the image is intended to be decorative.

 

Alt Text Basics

Alternative text--a written description of non-text content in web pages--has two important functions for accessibility:

  • It's read by screen reader devices in place of images, allowing the content and function of the image to be understandable to those with visual or certain cognitive disabilities.
  • It's displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.

Writing good alt text can be a bit more of an art than a science. It should be succinct--not more than 20 words is the recommendation--while communicating the "experience" of the image. A lot depends on the context of the page content where the image is being presented. If much about the image is already described in the surrounding text, the alt text can be quite brief.

Tips for Writing Alt Text

  • Ask yourself: "Why am I using this image? What information is it meant to convey?” (What's the pedagogical context?)
  • Keep it concise yet informative (convey the full experience of the image).
  • Don't include "image of" or "picture of" in the alt text; the screen reader will indicate it's an image. An exception would be if it's germane to the learner's experience to know, for example, that the image is a photo collage or an engraved illustration.
  • Remove the file type (.jpg, .png, etc.) from the alt text

Example

Not So Good

computer mouse sitting on open book with bad alt text description below

Alt Text: online learning

Good

computer mouse sitting on open book with appropriate alt text description below

Alt Text: computer mouse sitting on top of open book to represent the idea of online learning

When Is Alt Text Not Needed?

  • If an image is purely decorative and provides no useful information to the learner. For example, a picture of a butterfly on your syllabus page.
  • If the information provided by the image is conveyed effectively elsewhere in the page content. In this case, providing alt text would be redundant.

"Null" or decorative alt text is indicated by an empty set of quotation marks. In the HTML img tag, it would look like: alt="". In Canvas, select the "decorative image" box within the "Insert/Edit Image" dialogue box as shown below.

Formatting Alt Text with Canvas' Rich Content Editor (RCE)

  1. Once the page editor is open, click on the image (it will display a bold outline with squares in each corner to indicate it's selected).
    screenshot showing image selected

  2. Click the Embed Image icon in the RCE menu.
    screenshot of Embed Image tool in Rich Content Editor menu

  3. In the pop-up dialogue box, type an appropriate description in the alt text field OR select the Decorative Image box.
    alt text dialogue box indicating Alt Text field

  4. Click Update and save the page.

Long Descriptions

When you have a complex image or one with a lot of text, rather than trying to fit it in the alt text field, you'd want to provide what's called a "long text description." Include a short caption above the image saying "Accessible description of image" which links to a page with your long text description (your alt text can just say "link to accessible description below image"). Then create a separate page in your course with the complete description and a link back to the page with the original image.

This description page does not need to be included in a module; as long as it's published, the students who need it will be able to get to it using the link above the image.

Long text description example

Additional Resources

Because alt text is so important to the full comprehension of page content, and is so often misunderstood and done incorrectly, we strongly recommend that you use these two resources as guides: