You may have heard the phrase “a picture is worth a thousand words”. What if you are unable to see that image? What if that image was vital to understanding the content of a course? This is a problem for many students with various levels of visual impairments. It can also be a problem for students with limited internet access as well. This article is going to explore images and what to consider with them in the design of your digital end product.
Alternate text
Alternate text or more commonly shown abbreviated as “Alt text” is an attribute for images in web pages or other digital documents that is meant to contain text describing the image. The attribute was introduced in 1993 with the HTML 1.2 draft to provide support for text-based browsers. In many cases if you have seen a page with images that didn’t load, you have seen the alt text which describes the image that was meant to load. Alternate text naturally evolved into something that was utilized by screen readers to read the description of images. Problem is that alternate text needs to be entered by the content creators. It is one of those necessary tasks that isn’t indicated as being obvious to include when creating digital content.
What should go in Alternate text?
In most cases those “thousand words” are not necessary. The W3C Tips and Tricks on Images has good advice. In general:
- Imagine how you would describe what you are seeing to someone over the phone.
- Describe the most important features (why you are showing the image) to come first in the description.
- Make the description concise. Imagine the person on the phone needs to get off in the next minute. For this reason you should only have a maximum of 120-150 characters for your alt text.
- Don’t put in superlative text like “in the image”. Screen readers will address that before reading the alt text.
- If the image is decorative and doesn’t contribute any information to the content on the page or in the document, you don’t need to put in alternate text.
How do I include Alternate text?
It depends on what program or tool you are using. Here is a list of tutorials based on what you are using:
- Canvas: How do I manage alt text and display options for images embedded in the Rich Content Editor as an instructor?
- Microsoft Office: Add alternative text to a shape, picture, chart, SmartArt graphic, or other object
- Google Suite: Make your document or presentation more accessible
- Adobe Acrobat (PDF’s): Adding Alternative Text to Images in Adobe Acrobat Pro
If a tool is not listed here, a quick Google search with the tool name and “alt text” should bring up official documentation or other tutorials and videos that can help you.
Don’t use an image
What images are being used and when it is appropriate is worth considering when developing content. It may be better if heavily text-based images are not used and a text based alternative used instead. Some examples with alternatives to images include:
Images with quotes
- Type out the quote in plain text with quotes.
- Use a blockquote tag.
Scans of text
- Type out the text (or sections relevant from the text)
- Provide a document either typed up or in an accessible PDF with Optical character recognition (OCR) run in it.
Tables
The Diagram Center’s guidelines for tables advises that tables should be made using the table function in your rich-content editor.
Graphs
While images of graphs may be used, the Diagram Center’s guidelines for graphs advises that tables showing the plot points should compliment the table along with alt text that describes the general description of the graph. If a table is needed anyway for a graph, omitting the graph entirely can be considered.
Other Resources
- W3C Images Tutorial: A great start for learning about image accessibility on the web.
- WebAIM Alternative Text: A more comprehensive but simple guide about writing alernative text.
- Diagram Center’s Image Description Guidelines: A comprehensive list of how to describe all types of images.
- Video: Writing Great Alt Text with Kim Doberstein from 2019
