How do I make my images accessible?
[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.
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.
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.
[A] Equivalent alternatives to complex images (graphs, charts, maps, etc.) are provided in context or in a separate (linked) page.
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.
In this brief video, multiple methods of recording videos for online courses are demonstrated. These methods include professional filming, screencasts, webcam videos, and more.