Alternative Text Summary

Screen readers access the alternative text of images and allow the content and/or function of the image to be read aloud. Alternative text is displayed in browsers in place of images if an image file is not loaded or when the user has chosen not to view images.

Overview

Although blind and visually impaired learners may not see embedded images in bCourses, content creators should include alternative text that assistive technologies can read aloud. Properly using the Alternative Text field ensures blind and visually impaired learners have equal access to course content.

Best Practices

All photos and graphic images that are “essential” to understanding the content of a course page or document MUST be assigned an alternative text.
Be succinct. This means the correct content (if there is content) and function of the image (if there is a function) should be presented as concisely as possible. Typically, no more than a few words are necessary, though a short sentence or two may be appropriate.
Decorative images are design elements that enhance the tone and visual consistency of a document, but do not convey meaning essential to understanding content. These include repetitions of a logo, clip art, and graphics used for design purposes only. Decorative images need alternative text but the alternative text can be “nulled” (alt="" best for webpages) or a blank space (alt=" " best for Microsoft Office).
DO NOT use the phrases "image of..." or "graphic of..." to describe the image. It is usually apparent to screen reader users that it is an image.
If the content or function of a photo or image is properly described in the adjacent text or paragraphs, the alternative text can be nulled.
The distinction between "essential" and decorative design elements varies, depending if you are a subject matter expert, a content provider, or an Instructional Designer. Subject matter experts are positioned best to describe the relevance of a photo or a graphic.

Using Ally to add Alternative Text

If you have the bCourses role of Teacher, TA, Designer, or Admin, and you’ve already embedded an image to a bCourses Page or Assignment, the fastest way to add alternative text for that image is to use Ally. To get started, navigate to the course Page or Assignment and select the Ally indicator. Selecting this indicator opens the Ally interface and allows users to add alternative text in the “image description” field.

It’s also a good idea to read Ally's built-in help tips on“what this means” and “how to write a good description." The other available option is to indicate the image is decorative. A decorative image does not need alternative description because it’s not contributing to the meaning of the content. Select the “Save” button to apply your changes.

The Ally indicator will switch from red (with the arrow pointing left), to green (with the arrow pointing right), when the image description is properly added, or you’ve marked the image as decorative.

Reading Check

Use the Reading Check link below to view questions related to this workshop.

Reading Check

Sources

The Diagram Center
Jukka Korperla
How to Design Great Alt Text: An Introduction (Deque)
Penn State Accessibility
WCAG 2.0 A Guideline 1.1.1
WebAIM