Writing Alternative Text

Alternative text, or alt text, provides alternate information for a non-text image in documents and web pages (WebAim, 2018). Using alt text allows individuals with visual impairments to obtain the same information as their sighted peers when using a screen reader or other accessibility tools.

Content and Functionality

The goal of alt text is to convey both the content and functionality of an image (WebAim, 2012). Merely providing a description of an image is not enough, as it likely will not evoke the same feelings that someone would have when seeing the image.

For example, consider the following image:

black and white kitten crouching playfully behind a pillow.

A description of the image might be, “black and white kitten on brown textile.” That description, while accurate, doesn’t evoke any feelings – it’s very clinical.

A better description might be, “black and white kitten crouching playfully behind a pillow.” This description helps to convey both the content as well as the functionality of the image.

Decorative Images

Not all images are used to convey content; some images are purely decorative. Decorative images may be used to create a mood or feel for a particular web page or to enhance the content provided (WebAim, 2012). These images tend to be irrelevant to the actual content and can be distracting for someone using a screen reader. When using images that do not make any contribution to the message being conveyed by the content, it is best to leave the alt text blank.

Tips for writing good alternative text

  • Keep it simple: Alt text should be as brief as possible while still conveying the content and functionality of the image.
  • Convey the experience: What emotion is the image supposed to evoke? Make sure you convey this in your alt text.
  • Be clear: Don’t use the filename, “photo,” or “image” to describe an image.
  • Identify an action: For images that contain a link or require an action, be clear and identify the required action (i.e., click the image to go to another web page).
  • Communicate the message: If your image has text within it, use the alt text to reflect this content as well as the image. Avoid using images with heavy text.

For more information, visit the KB article, Accessibility for Web Authors, image alt text.

Sources

Cat image. Retrieved from https://www.pexels.com/photo/eyes-cat-coach-sofa-96938/.

WebAim. (2018). Alternative text. Retrieved from https://webaim.org/techniques/alttext/.

WebAim. (2012). Web accessibility gone wild. Retrieved from https://webaim.org/articles/gonewild/.

 

Written for the Accessibility Network by IT@UC eLearning Instructional Designer, Megan Wuebker.

 


Technology trouble? IT Happens.

With IT@UC, Getting Help is Easy.

magnifying glass ison

Looking for self help guides? Check the IT@UC Knowledge Base.

contact icon

Encountering general IT issues? Contact the IT@UC Service Desk.

Canopy icon

Trouble with Canopy/ eLearning Tools? Contact 24/7 Canopy Support.