Center for Online Learning
Georgia Southern University

Accessibility: Images and Text Equivalents

Adding an image to a Word document, PowerPoint presentation, or a Web page is a great way to illustrate concepts or help learners to recognize and identify objects, art, people, etc. Images are especially appropriate for learners with some types of cognitive and reading impairments. However, for visually impaired users, images may be obstacles to learning unless text equivalents for each image are provided.

Text Equivalents

When visually impaired users using screen readers encounter images, equivalent text-based descriptions should be provided. When the screen reader comes to an image, it will read the text-equivalent to the user.

There are two types of text equivalents:

  1. Alternative Text: Identifies subject of image
  2. Long Description: Provides a detailed description of the image when needed.

Text equivalents are not visible on a page or document. They are hidden and accessed only through screen readers which read them back to users.

Alternate Text

Alternative text is used to describe the subject of an image. Alt text is not visible on the web page. It is read to visually impaired users with screen readers. Use alternative text for every image except those that are strictly decorative. Decorative images do not need text equivalents.

Alternative text should:

  • Identify the subject of the image.
  • Use as few words as possible.

Adding Alternative Text to Images

Folio provides course developers with an alternative text prompt when inserting an image. If you place an image in Word or PowerPoint, right-clicking on the image allows you to edit the properties and add alternative text.

Alternative text for an image
Adding Alternative Text in Folio.

Descriptions

Some images may require text equivalents of more than just a few words. If this is the case, the best solution is to:

  1. use alternative text, and
  2. add a written description to the document or add a “long description” to the HTML code

Written Description or “Long Description?

If you wish for all students to read a detailed description add it to the same document as the image. If you wish the description to be available only to visually impaired users with screen readers, use a “long description”.

Example

The purpose of this image is to illustrate the distinguishing characteristics of a male peacock.

Male Peacock

Alternative text: Male peacock

Description: The male peacock is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings. © W3C

Example

When writing descriptions for technical images and data graphics, only those visual details needed for understanding the concept are included in the description.

The purpose of this image was to illustrate the velocity profile of laminar flow in a pipe.

Velocity profile

Alternative text:  Velocity profile of laminar flow in a pipe.

Description: This diagram shows fluid flowing through a pipe along the x-axis in parallel layers with minimal disruption. Velocity arrows are shorter on the edges, representing a slower velocity vx and longer in the center, representing a faster. The edges of the arrow form a parabola and represent the “velocity profile.”

» This example is from Penn State’s recommendations for alternative text and complex images.

What are “Long Descriptions”?

Sometimes you may wish students to independently analyze and summarize an image, in which case a detailed description would be counter-productive to your learning goal. In these situations, use a “long description”. Long descriptions are detailed descriptions of images that are embedded in the HTML code of a web page and not visible on the web page. Like alternative text, they can only be accessed by users with screen readers. Because a visually impaired user has accesses to the description you will probably need to evaluate their understanding of the image using a different assessment than the rest of the class.

If you want to use “long descriptions” please contact an instructional designer at the Center for Online Learning since they must be encoded into the web page.

Optional: For a deeper and more detailed explanation of text equivalents, visit Web Accessibility In Mind or the Diagram Center.

Last updated: 6/6/2017

Center for Online Learning : : Henderson Library, Suite 1303 : : (912) 478-0049