How do I make my images accessible?

For students with visual impairments, images in a course site may pose a challenge. They may not be able to distinguish between colors or see the complex chart referenced in the text. It’s important to provide alternate and accessible methods of engaging with the information that an image conveys.

[A] All images, form image buttons, and image map hot spots have alt-text. and [A] Images that do not convey content or that convey contain already contained in text are given null alt-text.

Alternative text, or alt-text, is one of the most crucial accessibility supports in web or document design. Alt-text is, at its core, a textual description of a visual asset, whether that asset is a photograph, a map, an interactive graphic, or a video. Providing a text description of the item allows for visually impaired users to understand and engage with the information provided in the image just as fully sighted users do. Screen readers will, as demonstrated previously, read out the alt-text description of the image for visually impaired users. This is why quality alt-text descriptions are so important.

What makes a good alt-text description?

The best way to determine what information to include in alternative text and how to convey it is to simply imagine that you can’t share the image at all; you can only describe it to your students. How would you do that? What information would you include? WebAIM lists the following four Dos and Don’ts on their Alternative Text guide:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • Do NOT be redundant or provide the same information as text within the context of the image.
  • Do NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

WebAIM also points out that context is everything when creating alt-text. “The alternative text for one image may be vastly different based upon the context and surroundings of the image itself.” (WebAIM, Alternative Text) Consider what information is conveyed on the page around the image, as well as the information that the image itself contains. When considering the context, you may come to the conclusion that the image doesn’t convey any information. Some images are purely decorative: for example, an image of people shaking hands on a page about business negotiations. The image makes the page more visually interesting, but for students who aren’t perceiving the page visually, the image adds nothing. In this case, you can leave the alt-text out entirely. It’s important to make sure the alt-text is truly blank, however. Often, websites (such as Canvas) will use the image file name as the default alt-text.

Many images, however, will convey information that is valuable to the students. Photographs of research sites, instructor portraits, statistical graphs–these images all contain information, and thus need alt-text descriptions. There are a few options available for how to structure and place the alt-text for an image.

The most common way of including alt-text is to embed it in the image code itself [link]. This is done when uploading or embedding the image into a web page or document. Captioning the image is also an acceptable option. Finally, the image can be fully described in the surrounding text, which is one method of providing alt-text for more complex images.

How do I add alt-text to images?

There are two main options for adding alt-text to an image. The first is to insert the alt-text into the code of the image; the second is to include it as a descriptive caption or within the text itself.

Embedded Alt-Text

In Canvas, when embedding an image, the pop-up window that appears includes a field that asks for descriptive alternative text. In this field, write a brief description of the image. Canvas embed image window with alt-text entry highlighted. Microsoft Support has instructions on how to add alt-text to images in Office 2007 and 2010, as well as Office 2013. Most other word-editing processing programs also have alt-text support; a web search for “how to add alt-text to images in <program name>” should bring up instructions.

Captions and In-Text Descriptions

A caption underneath an image or an in-text description that conveys the same information as the image are also acceptable forms of alt-text, so long as they provide the same level of information as the image itself. For example, the above screenshot of the Embed Image window is adequately described by the sentences before it. In this case, alt-text is not entirely necessary, because the image has already been described by the text.

[A] Equivalent alternatives to complex images (graphs, charts, maps, etc.) are provided in context or in a separate (linked) page.

Embedded alt-text or captions work well for simple images, such as photographs. But what about more complex images, like graphs, charts, or maps? These images convey a great deal of information that often cannot be described succinctly. But the information is often vital to understanding the lesson, and so it must be described in a text format. Alt-text on these complex images can either appear in the immediate context, or can appear as a detailed description on a separate, linked page. Consider this image of the water cycle:
Image courtesy of the Global Water Partnership.

Imagine that you needed to explain the water cycle, but couldn’t use this image. Alt-text for this image might read “In the water cycle, rain falls into bodies of water, like the ocean. The water is later evaporated due to the sun’s heat, and when enough water has evaporated, it forms clouds and eventually falls back as rain.” This text conveys the same information as the image, as well as some additional context. For this reason, detailed descriptions are the preferred version of alt-text for more detailed images, graphs, or charts. All students, visually impaired and not, can benefit from these detailed descriptions. The National Center for Accessible Media has compiled some recommendations and guidelines for writing alt-text for scientific or mathematical images, such as graphs and charts.

[A] Embedded multimedia is identified via accessible text.

Embedded video or audio clips should have a brief, textual description accompanying them, so that individuals using screen readers will know what the media is before they hit play. For example, if you were going to insert the following video into your course, you would want to include an annotation.

In this brief video, multiple methods of recording videos for online courses are demonstrated. These methods include professional filming, screencasts, webcam videos, and more.

[A] Color is not used as the sole method of conveying content or distinguishing visual elements.

Like the standard about not relying solely on position, shape, or size [link], color should not be solely relied upon to convey information. Telling students to focus on keywords in red, for example, would not be helpful to students who are colorblind or whose screen reader cannot recognize font color. This is also an important consideration when designing graphs and charts. Make sure that elements on the graph are both marked by distinct color differences and clearly labeled via text. In addition, there are certain colors that can be easily confused with colorblindness. Avoid pairing these colors together when distinction between colors is important: Chart showing commonly confused colors: red and green, yellow and light green, light blue and pink, and dark blue and violet. Chart showing commonly confused colors, adjusted to show how the colors would be seen by a colorblind person.

[AA] Images of text are not used.

Screenshot of several paragraphs of sample text. Easy enough to read, right? For a fully sighted user, perhaps. But how is a screen reader going to handle this image? It can’t read the text– it has to rely on the alt-text to explain what the image is. In this case, the only way for a screen reader to understand the information would be to retype the complete text on the image into the alt text. And at that point, you may as well just put the text into the page itself. When it comes to images of text, don’t do it. Retype the information into the Canvas page or find another way of conveying the information. Using images of text does a great disservice to visually impaired students, who will miss large amounts of information if it is conveyed in this way.