D7 - Images (alt text)

D7 - Images (alt text)

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

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 and select the "Image Options" button.
    
   
   
2. From the slider window, enter the appropriate text in the Alt Text field (or mark as Decorative).
    
   
   
3. Click Done and save the page.

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.