Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Images of Text

Standard

The standard with which Michigan Virtual courses need to comply. 

Text should be used to convey content, rather than images of text. Exceptions include logotypes (text that is part of a logo or brand name) and images that are essential to the information being conveyed (i.e. images of primary source documents or web navigation tutorials). These exceptions must be accompanied by a text alternative for learners. Complex images, such as charts or graphs, can be used where necessary, but must consider recreating it as a table or include an image transcript / long description. 

Alignment

WCAG 

  • 1.4.5: Images of Text (Level AA)
  • 1.4.9: Images of Text (No Exception) (Level AAA) 

Quality Matters 

  • 8.3 The course provides accessible text and images in files, documents, LMS pages, and web pages to meet the needs of diverse learners.
  • 8.4  The course provides alternative means of access to multimedia content in formats that meet the needs of diverse learners.

NSQ: Quality Online Courses 

  • E3 The online course provides accessible course materials and activities to meet the needs of diverse learners.

 

Requirements 

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

  1. Avoid using images with text where possible. 
  2. Use clear, concise alt text to describe an image where text is used. (i.e. “Michigan Virtual logo.”) 
  3. If an image that contains text must be used, include a long description / image transcript. The long description can be hyperlinked for a learner to open, as it is too long for the alt text field. 
    • Example 1: You want to use an image of a letter written in the early 1900s. The long description should include both the description of the image and the text of the letter. 
    • Example 2: You found a bar chart that illustrates data over a certain time period for the content you’re working with. The long description / transcript should describe the image and provide each data point – both the time period and units of data. 

 

Implementation 

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

Requirement 1 

Choose an image without any text in it. 

  1. Rather than choosing an image of word art spelling the word “Welcome”, select an image without text, and use text styling to write the word “Welcome” in your course. 

Requirement 2 

If an image with text must be used, such as a logo with the company name, include concise alt text. 

  1. Add the image to the course content. 
  2. Add concise alt text to the html page. 

Requirement 3 

If a complex image with text is used, such as a chart or graph, or a primary source image, include a long description of the image, also known as an image transcript. The image transcript can be incorporated into the content for every learner, rather than being an externally linked document if desired. 

  1. Add the image to the course content. 
  2. Generate the long description of the image. It should include both a description of the image as well as any key data points and labels that are on the image. 
  3. Save the long description in the project’s google drive folder. 
  4. Add a link beneath the image to the long description. 

 

Resources

What resources would help a developer implement this standard appropriately?