How do I make my images accessible?

For blind and low-vision students, 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.

All images that convey information must have alt-text descriptions.

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, or an interactive graphic. Providing a text description of the item allows for blind and low-vision 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 blind and low-vision users. This is why quality alt-text descriptions are so important.

What makes a good alt-text description?

When thinking about how to write alt text, the most important thing to remember is that context is key. Look at the context in which the image exists on the page. What information does the surrounding text convey, and what information are you relying on the image to share? If the image is decorative, the answer might be “no information,” in which case you should leave the alt text blank. But if you’ve included an image of, for example, a family looking at a museum exhibit, think about what students need to take from the image. Is it the number of children in the family? The interactions within the family, or the family’s engagement with the exhibit, or their apparent levels of interest? The context in which you’ve placed the image can help you determine what information students should take from it.

One 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.

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 HTML 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.

Equivalent text 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, maps, or diagrams? 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. Again, the key thing to think about when writing alt text, even for complex images, is context. What information do students need to take from a 
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. For example, consider this graph, which contains completely made-up numbers on the sales of pet cats, dogs, and rabbits:

 

But what should the alt text say? That depends entirely on what the key information is for the viewers. Maybe students need to understand the overall trends, in which case the alt text could read: cat purchases declined slightly from January to June, while dog purchases increased and then became flat. Rabbit purchases were low and flat, except for April, when there was a spike in purchasing. Maybe they need to track the specific numbers of dogs purchased per month. The alt text should emphasize that information. Or maybe the students need every single exact number per type of pet per month, in which case a bulleted list summarizing the purchases by month might be best. It’s again, all about context, and what information the students need in order to be successful.

For this reason, detailed descriptions are the preferred version of alt-text for more detailed images, graphs, charts, or diagrams. All students 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.

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.

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 to communicate information, color should also 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.
There are also numerous resources available, both online and within image editing programs (such as Photoshop), that will allow you to apply colorblind filters, so non-colorblind users can see how their images and graphics might look to someone who is colorblind. COBLIS is a very easy-to-use and free online resource. Simply upload your image and see how it looks in different filters. In addition, most of the default color palettes in Microsoft Office programs are designed to be easily differentiated by all viewers, no matter their level of color perception.

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 blind and low-vision students, who will miss large amounts of information if it is conveyed in this way.