How do I make my images accessible?
All images that convey information must have alt-text descriptions.
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.
- 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. 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.
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.
In this brief video, multiple methods of recording videos for online courses are demonstrated. These methods include professional filming, screencasts, webcam videos, and more.