D7 - Images (alt text)

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.

Tips for Writing Alt Text

• Ask yourself: "Why am I using this image? What information is it meant to convey?”
• 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

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 comprehensive alt text would be redundant. The alt text can be simply a short explanation (e.g., "Bloom's taxonomy, described in page text").

"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, simply tick the Decorative box in the Image Options slider window as shown below.

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

1. Once the page editor is open, click on the image and select the "Image Options" button.
    
   
   
2. Click the Embed Image icon in the RCE menu.
    
   
   
3. Click Done and save the page.

When Long Alt Text Is Needed

Ideally, 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."

First, create a separate page in your course with the complete description and a link back to the page with the original image. 

Back on the page with the image, include a short caption immediately above the image saying something like "Accessible description of image" which links to the page with your full text description. (Your alt text can just say "link to accessible description above image" or can be a very concise description.) 

This long-text 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.

Here's an example: 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:

• The Definitive Guide to Alt Text Links to an external site.
• WebAIM: Alternative Text Links to an external site.  

PopeTech will alert to suspicious alternative text, and the slider permits editing or marking the image as decorative.

The WAVE tool allows you to see the alt text for an image so you can check it without having to open the page editor, and will also alert you if the alt text is likely insufficient or contains extraneous words (which often means it includes "image of" or the file type).

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 name, 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.