Designing Inclusive Images and Words

Focus Area Five
Alternative Text and Screen Readers (Part Two)

Alternative text describes the information or the function of an image. And, depending on the purpose of an image, there are a number of ways to provide appropriate alt text descriptions. Image purposes may include: functional images (a printer icon to represent the print function); complex images (data or graphs); images of text (logos); decorative images (visual decoration without conveying information) and informative images (pictures, photos and illustrations) (World Wide Web Consortium, 2015).

Functional Images

shpping cart icon

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The alt text for the image should convey the action that will be initiated or the purpose of the image, rather than a description of the image. For example, the text alternative should be “print this page” rather than “(image of a) printer”. If you don’t add alt text, a screenreader will not read the function and this will not help users to understand the action of the image (World Wide Web Consortium, 2015).

Complex Images

Example of an infographic depicting various statistics regarding disability in Canada

Complex images contain a lot of information – more than can be conveyed in a short phrase or sentence including:

  • graphs and charts, flow charts and organizational charts;
  • diagrams and illustrations where the page text relies on the user being able to understand the image;
  • maps showing locations or weather systems.

For complex images, two-part alt text is needed. Part one is the short description to identify the image and an indication of the location of the long description. The second part is the long description which is a textual representation of the essential information conveyed by the image.

Complex images can be difficult to understand by many people. Long descriptions benefit everyone, and it is good practice to make them available as part of the main content. Consider, as well, reducing unnecessary complex images and make them easier to understand for everyone.

It is good practice to refer to and summarize complex images. For example, “The following graph shows the difference between exit and entry survey responses to questions about the benefits of captions. Entry survey responses are blue, exit survey responses are red and the difference or change is green” (World Wide Web Consortium, 2015).

Decorative Images

Decorative images don’t add information to the content of a page. Decorative images include visual styling and borders or images that have already been described in the text. There is no need to repeat this information. If images are decorative only, alt text is intentionally left blank. The screen-reader will skip the image entirely and never mention that one is present (World Wide Web Consortium, 2015).

Screen shot of a CSS Zen Garden website with a decorative border highlighted.

Image: Screen shot of a CSS Zen Garden website with a decorative border highlighted.

These are some of the elements in an image that may require describing:
  • Objects, buildings and people
  • What’s happening in the image
  • Purpose of the image
  • Colours
  • Location
  • Emotions and atmosphere
Tips for writing alt text:
  • Use simple and plain language
  • Think about alt text as a tweet that describes an image. Don’t use more that 140 characters. Keep it between 5 and 15 words.
  • Consider the context of the image. Why is this image being used and what information is being conveyed?

— From Phase 2 (2013) and modified from notes by Danielle Landry and Dr. Chelsea Jones

Red Peppers in a red pan stuffed with beans and vegetables.

Image: Red Peppers in ared pan stuffed with beans and vegetables.

Audience: Home chefs

Message to convey: one dish recipes

Clear example of alt text: A red frying pan with cooked red peppers filled with sauce, pinto beans and rice

Unclear example of alt text: Food in a pan

— Modified from Phase 2 (2013)

illustration of gears in motion

Task

Below is a selection of images by the photographer Steve Kean. Write alternative text for each image for an on-line article about diversity in city life. When you are finished, click to reveal the suggested alt text.

Bearded man singing into a microphone

Please fill in the textarea

Bearded man singing into a microphone

Right answer: Bearded man singing into a microphone

Assortment of cooked seafood on a restaurant’s chalk menu board

Please fill in the textarea

Assortment of cooked seafood on a restaurant’s chalk menu board

Right answer: Assortment of cooked seafood on a restaurant’s chalk menu board

Blooming cherry blossom trees

Please fill in the textarea

Blooming cherry blossom trees

Right answer: Blooming cherry blossom trees