Skip to Main Content

Accessibility Toolkit for Course Materials

Images

Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content."  - As stated by the World Wide Web Consortiums' Web Accessibility Initiative

  • To make images and graphics "visible" to all users is one of the first principles of web accessibility. 
  • To make images and graphics "visible" alternative text ("alt text") needs to be added. 
  • Alternative text provides a textual alternative to non-text content in web pages.

Accessible images are beneficial in many situations, such as:

  • People using screen readers: The text alternative can be read aloud or rendered as Braille
  • People using speech input software: Users can put the focus onto a button or linked image with a single voice command
  • People browsing speech-enabled websites: The text alternative can be read aloud
  • Mobile web users: Images can be turned off, especially for data-roaming
  • Search engine optimization: Images become indexed by search engines

Note: Removing images from websites (so-called “text-only versions”) make them less accessible and functional for these users and situations.

Basic principles:

  • Every image must have an alt attribute.
  • Alternative text (alt-text) can be provided in the "alt attribute" or in the surrounding context of the image.
  • Appropriate alternative text depends heavily on the image's context.
  • Decorative images still need an alt attribute, but it should be null alt="".
  • Alternative text should present the CONTENT and FUNCTION of the image.
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
  • Alternative text should be succinct and not contain the phrases "images of..." or "graphic of..."

 

Type of Images

The type of information you provide in alternative text is based on the purpose of the image. Here are brief descriptions of various image types of images, along with links to more detailed tutorials on how to provide appropriate alternative text for each image type.

  • Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
  • Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
  • Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
  • Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
  • Complex images: such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
  • Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
  • Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

-- Information source: W3C/WAI – Images Concepts


Wave tool "W" icon

Use the WAVE tool to check on the "alt text"

Decision Tree and Training Video

Still not exactly sure when and what type of information you should add in your alternative text? Use this "Alt Decision Tree" to help you decide.

Decision tree visual.

Check out this 6 minute video "Composing Meaningful Alternative Text" created by Wake Technical Community College's eLearning Support Department in North Carolina.


Citation: Attribution: [eLearning WTCC ] (2014, Nov. 4) Composing Meaningful Alternative Text [Video File]. Retrieved from https://youtu.be/9KIHn52HXPk

Specific Instructions on How to Add Alternative Text

Now that you know how important alternative text is, the next step is learning how to add "alt text" when creating your OER. Adding "Alt-text" images is very easy and should be incorporated into your regular workflow for whenever you have images. Below are instructions on how to add "Alt-Text" to images on various platforms and programs.

GOOGLE SITES

GOOGLE SITES: ALT-TEXT INSTRUCTIONS

Here is a great 1:18 minute, easy to follow video showing you how to add "alt-text" to your google documents.


Attribution: [Melinda Waffle] (2017, Mar. 19) Google Sites - Adding Alt Text to Images [Video File]. Retrieved from https://youtu.be/n6Zei_3ic_0

LIBGUIDES

LIBGUIDES: ALT-TEXT INSTRUCTIONS

There are loads of spots where images can appear in your LibGuides - from thumbnail images in your database assets, to gallery box images, to resource icons in your link assets. Whenever adding images in LibGuides keep an eye out for the alternative text field when you're adding or editing an image anywhere in your LibGuides system.

FYI: To create an empty or null alt attribute, simply don't put anything in the alternative attribute field. Leave it completely blank.

Screen grab showing alternative text dialog box in LibGuides

LUMEN

LUMEN: ALT-TEXT INSTRUCTIONS

Adding alt-text to an image in a Lumen item is exactly like adding alt-text in WordPress.

Once you have selected or uploaded an image, you will see a "Attachment Details" box. In this box you will see a thumbnail of the image and the following information fields:

  • Title: The title of this media.
  • Caption: The caption for this image. The text you enter here will be displayed below the image.
  • Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
  • Description: A description for this particular media.

Screen grab showing alternative text dialog box in Lumen Learning

MICROSOFT OFFICE SUITE

WORD/EXCEL/POWERPOINT: ALT-TEXT INSTRUCTIONS

Examples on how to add alt-text to Microsoft Office Suite products.  The main example shown in video is adding alt-text in excel.


Attribution: [Academic Algonquin] (2013, Jul. 30) Creating Alternative Text [Video File]. Retrieved from https://youtu.be/LvDgp8yDh4M

OER COMMONS ISKME

OER COMMONS ISKME: ALT-TEXT INSTRUCTIONS

OER Commons requires alt-text when adding images.

 

Screen grab showing where to add alt-text in OER Commons

OMEKA

OMEKA (.org & .net) ALT-TEXT INSTRUCTIONS

  • "Alt text" is set to the file's TITLE in Omeka.
  • The file name is used on upload/import, but can be edited afterward.
  • On Omeka.ORG, theme files can be edited to use different information in the alt field.
  • It is not currently configurable on Omeka.net.

WORDPRESS

WORDPRESS: ALT-TEXT INSTRUCTIONS

Once you have selected or uploaded an image, you will see a "Attachment Details" box. In this box you will see a thumbnail of the image and the following information fields:

  • Title: The title of this media.
  • Caption: The caption for this image. The text you enter here will be displayed below the image.
  • Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
  • Description: A description for this particular media.

Screen grab of the attachment details box you see when adding an image in wordpress


This video shows you the difference between "Image Alt-Text" and "Image Title" in WordPress.


Attribution: [WPBeginner - WordPress Tutorials] (2014, Nov. 4) Image Alt Text vs Image Title in WordPress [Video File]. Retrieved from https://youtu.be/1kz8Xr88Q7c


Attribution: [Skip Via] (2014, Sept. 3) Using ALT Image Tags [Video File]. Retrieved from https://youtu.be/YmPxRuPqXcQ?t=81