Accessibility artwork

By | May 10th

Accessibility Training for Teachers: Recap

In my last post on headers, I suggested a rationale for faculty focused accessibility training. In short, I believe it is each faculty developer’s responsibility to ensure that the digital materials they provide are accessible. This article will take a look at the “alt attribute” (alt is short for alternative). The alt attribute provides a text-based alternative for audiences who are not able to access the visual information contained within an image.

FYI: The alt attribute is often incorrectly referred to as an “alt tag”.

Images and HTML:

The HTML code for every image must contain at least two pieces of specific information (required since HTML version 4.0): an image’s web address (URL) and its alt attribute. With this information, your web browser can find, display, and if necessary, describe an image’s content. 

Alt Attribute HTML Code :

Cartman from South Park

Cartman image with load failure and alt text displayed

Example of image load failure, with alt text displayed.

Let’s look at the code your web browser is using to render this Cartman image.
<img src="http://musictoolbox.org/wp-content/uploads/2015/05/Cartman.png" alt="Cartman from South Park">.

Let’s break it down:

  1. <img> indicates an image
  2. src="" contains the web address of the image to be displayed
    “http://musictoolbox.org/wp-content/uploads/2015/05/Cartman.png”
  3. alt="" contains the image’s description or “alt text”
    “Cartman from South Park.”

An image’s alt text will be displayed when an image fails to load. It is also the text that will be read aloud by screen reading software.

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. ~ American Foundation for the Blind

If the Cartman image failed to load (see example image to left), the sighted viewer would be presented with a broken image icon and the alt text, “Cartman from South Park.” Whether or not an image loads, the visually impaired user will hear the alt text read aloud by the screen reader.

The Importance of Alt Text:

Screen readers can only translate written text into spoken word.  As such, it is impossible for a screen reader to interpret the visual content contained in an image. In order to meet ADA accessibility standards, a blind learner needs to be provided with the “text equivalent” of this visual content.

The Implications of “Text Equivalent” for Faculty:

Each instructor needs to determine what information the visually impaired learner will miss by not seeing an image. Alt text does not necessarily need to be a detailed description of an image’s visual content. A well-written alt text will provide learners with equivalent content, tailored to fit within a course’s context. To demonstrate this point, try this.

Which of the following alt text samples is appropriate for this image?

Sample image of the gardens of Versailles

Which alt text is appropriate?

  1. An image of the gardens surrounding Versailles.
  2. The gardens at Versailles exhibit the sorts of excesses that led to the French Revolution.
  3. “These two bosquets were arranged as a series of paths around four salles de verdure and which converged on a central “room” that contained a fountain.” ~ Wikipedia
  4. The exuberance, riotous surface detail, and symmetry that typify the Baroque are present in landscape architecture of the period and the works of J S Bach.
  5. Visitors will enjoy our beautiful walking tour of the gardens at Versailles.

All of these options are appropriate, depending on the nature of the class.

  1. Appropriate for a general humanities class (more decorative that informative).
  2. Appropriate for a class covering European historical trends.
  3. Appropriate for an Art/Architectural History class.
  4. Appropriate for a Music appreciation class.
  5. Appropriate for a travel agency’s website.

Best Practices for Alt Text:

1. Always Provide Alt Text
All images must contain alt text. Alt text is an HTML standard and required for accessibility.

2. Decorative Images
When an image serves only a decorative function, it should be left empty (alt=""). This referred to as “null.” It is considered to contain any pertinent information. Remember though that the (alt="")still needs to be included as an HTML standard.

3. Abbreviations
Abbreviations in alt text are fine if formatted correctly. Each letter in the abbreviation needs to be separated by a space. For instance, alt="E R A" would be read as E. R. A. (earned run average), while alt="ERA" could be interpreted as the word “era.” How a screen reader speaks ERA depends on the particular “voice” algorithm the learner has chosen.

4. Length
It is best to limit the duration of alt text to 125 characters (including spaces). Older versions of JAWS, one of the most popular screen readers, will sometimes break-up longer descriptions into multiple 125 character segments. Long descriptions may create confusion for learners since breaks sometimes occur within words or between sentences.

5. Longer Descriptions

Cartman from South ParkIf a textual equivalent cannot possible in 125 characters, there are two options:

  1. If an image requires a significant amount of explanation, consider including this comment within the lesson. All the learners in your class, sighted and blind, might benefit from this added information.
  2. (longdesc="") is another attribute that can add to an image’s code. This attribute points learners to an additional web page or file where a longer text description resides. Let’s insert the longdesc attribute to the Cartman image code.

<img src="http://musictoolbox.org/wp-content/uploads/2015/05/Cartman.png" alt="Cartman from South Park" longdec="http://en.wikipedia.org/wiki/Eric_Cartman">.

This added element allows an instructor to provide a visually impaired learner with an expanded description. I chose to link to Cartman’s wiki page.

Adding Alt Text in MS WordImage of adding alt text using the image format tool in microsoft word

In MS Word, the “description” box is where your alt text should go. It is not necessary to include a title. Remember to limit your text to 125 characters.

  1. Select the image
  2. Go to the Format menu
  3. Select Picture
  4. From the provided list, select Alt Text
  5. Add a Title for the image
  6. Add a Description for the image
  7. Click the OK button

In MS Word, the alt text “null” will not cause a screen reader to skip a picture. If you are ultimately translating your word doc file into a pdf, use the term “decorative” in the description box. When reading a pdf, a screen reader will skip an image with the “decorative” alt text.

Note: If you are using a PC, an exported pdf file will retain alt text. If you are a Mac user, an exported pdf will not retain alt text. Mac users should save their documents to a flash drive, open them on a PC, before exporting as a pdf.

Adding Alt Text in your Learning Management System (LMS)

adding alt text in LMSAll LMSs allow you to add alt text to a picture. The above image shows alt text being added in Canvas, and below, alt text is added into Pearson’s eCollege. Pearson’s eCollege refers to alt text as “descriptive text”.

adding alt text in Pearson eCollege

In an LMS, there are three steps required to add alt text.

  1. Select the image
  2. add a description into the alt text blank
  3. Click “update” or “save”

null

Summary

Alt text is easy to add and provides real and valuable assistance to visually impaired learners. Remember, alt text needs to offer textual equivalence. Well-written alt text will supply learners with equivalent content, tailored to fit within a course’s context. Let’s get out there and be accessibility savvy!