Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Alt Text

Standard

List all of the standards with which Michigan Virtual courses need to comply. 

For example: What WCAG standard is this iPD convention based upon?

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.

WCAG 2.2 1.1.1 Non-text Content

Requirements 

What exactly does iPD need to do in order to comply with each standard?
Write in easy-to-understand language with links to the source(s). 

For example: What exactly do captions need to include?

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 a short sentence. 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 more than 150 characters are needed to describe the content, a long description should be used.

If a long description is needed, a short description should still be provided within the alt text. In this case, the short description should briefly describe the non-text element and 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: “According to the graph, the average max temperature in Grand Rapids for January is 31, 34 for February, 44 for March….” [the long description continues to describe the data in the graph]
  • 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).
    • Short description: “A bar graph showing the average temperature for Grand Rapids, Michigan by month. A long description is linked directly following this image.”

Non-text alternatives should provide all necessary information for understanding the image with an emphasis on the purpose of the image. The alt text should allow the learner to understand the information that the non-text element is meant to convey within the context of the content. Unless it’s important in understanding the purpose of a non-text element (e.g., in an art history course), the visual appearance of the non-text element does not need to be described.

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 screen readers would simply read the file name. 

If a non-text element is a button or other control that accepts user input, the alt text should describe the function of the button. It does not need to describe the visual appearance of the button.

  • Example:
    • On an HTML page, a blue button with the label Next is used to advance in a scenario. The alt text should describe the function of the button (i.e., that it’s used to advance within the scenario) instead of the visual appearance.

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

Implementation 

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

For example: What is the process for getting captions created for a video?

  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?”

Accountability

How can iPD test or track the successful implementation of this standard?

For example: What is the process for testing the implementation of captions?

Double_click_to_replace_this_text

Resources

What resources would help a developer implement this standard appropriately?