Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Alt Text

Standard

The standard with which Michigan Virtual courses need to comply. 

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for in the situations listed below.

Alignment

WCAG 

WCAG 2.1 A 1.1.1 Non-text Content

 

Requirements 

What exactly do course developers need to include in order to comply with this standard? 

Any non-text content presented needs to have a text-based alternative available. In the case of images or other static visuals (e.g., a chart or graph), this most often takes the form of alt-text, a description embedded within the HTML alt characteristic of an image. This may also include a longer text description within the body of the content or in a separate location (such as a transcript).

  • Short descriptions are appropriate when the visual can be described in a few phrases or short sentences. This description would be included directly in the image in the form of alt-text.
  • Long descriptions are appropriate when the visual contains a large amount of information that needs to be conveyed (such as a chart or graph).

There are no hard and fast rules (e.g., character or word limits) about when a long description should be used instead of a short description. It is recommended that alt-text should be less than 150 characters. 

If a long description is needed, a short description should still be provided within the alt-text. In this case, the short description should indicate where the long description is located:

  • Example: The non-text description of a bar graph
    • Short description: “A bar graph showing the average temperature for Grand Rapids, Michigan by month. A long description can be found in the paragraph directly following this image.”
    • Long description: “As you can see, the average max temperature in Grand Rapids for January is 31, 34 for February, 44 for March….”
  • This description could also have been provided in an image transcript with a link to the transcript immediately following the image itself (with its location being announced in the short description).

Non-text alternatives should provide all necessary information for understanding the image with an emphasis on the purpose of the image. While the general appearance of the visual could be described, the alt-text should allow the learner to understand the information that the visual is meant to convey within the context of the content.

It is not necessary to add “image” to the alt-text of an image. Screenreaders will already announce “image” before reading the alt-text.

  • Example: 
    • The alt-text “Image of two cardinals. The male is a bright red while the female is brown with red accents.” would be read by a screenreader as “Image: Image of two cardinals. The male is a bright red while the female is brown with red accents.”

If an image is purely decorative (i.e., the image does not convey information that a learner needs to understand), it is better to mark the image as decorative, allowing a screen reader to bypass the unnecessary element. Some platforms (such as H5P and Brightspace) allow you to check an option indicating that the image is decorative. Where this option is not available, a null (empty) alt-text should be included. How to include a null alt-text will vary by platform. For example, in CourseArc, a single space should be added to the alt-text field (and nothing else) to generate a null alt-text. Note: Avoid simply leaving the alt-text field blank and assuming that this will generate a null alt-text. In this case, some screenreaders would simply read the file name. 

More information can be found at Understanding SC 1.1.1: Non-text Content (opens in a new tab).

 

Implementation 

How can course developers implement this standard? What is the process for doing so?

  1. When adding images or other visual content to newly generated content, ensure that the image is appropriately tagged with alt-text that provides a description of the content. 
    1. Platforms such as CourseArc, Brightspace, and H5P will prompt you for this alt-text when you add an image. 
    2. Within Storyline, the alt-text menu can be accessed by right-clicking on an image and selecting “Accessibility.”
    3. If working directly in HTML, the alt attribute must be manually added:
      1. <img src=”/d2l/common/viewFile.d2lfile/Content/638131171902232055/800px-Curling_at_Eglinton_castle,_Ayrshire,_Scotland.jpg?ou=10883&amp;fid=L2NvbnRlbnQvZW5mb3JjZWQvMTA4ODMtSkYtU05EQlgvODAwcHgtQ3VybGluZ19hdF9FZ2xpbnRvbl9jYXN0bGUsX0F5cnNoaXJlLF9TY290bGFuZC5qcGc” alt=”A painting of curlers at Eglinton Castle, Ayrshire, Scotland in 1860″>
  2. If the content is decorative (i.e., it does not convey any necessary information), include null alt-text to indicate that the content can be skipped by a screenreader.
    1. Platforms such as Brightspace, Storyline, and H5P will provide a checkbox to indicate that an image is decorative.
    2. CourseArc will require you to manually enter a single space in the alt-text field to generate null alt-text.
    3. If working directly in HTML, the null alt-text should be added manually by adding two quotation marks to the alt attribute:
      1. alt=“”
  3. If the content cannot be described in a few short phrases or sentences, include a longer description. This longer description can be contained within the body of the content or in a separate location. Even if a longer description is utilized, a short description should still be provided within the alt-text and should indicate the existence and location of the long description.


Note: When reviewing alt-text, it can be helpful to ask yourself, “If the image were removed and only the text description remained, would this page still function the same?”

 

Resources

What resources would help a developer implement this standard appropriately?