What are Alternate Text Descriptions?
Alt Text is the text-only information that is associated with an image for the purpose of providing information that is equivalent to the image itself. It’s used to provide information when images cannot be viewed; usually, when the person looking at the image has a visual impairment, but can also be beneficial when images on a page cannot be loaded. For the purposes of this article, the focus is primarily on alt text as an aid for users with visual impairment.
Informational Images or Decorative Images?
Many images used in online courses are informational in nature; meaning that they convey information that is part of the learning activity in which it is used. Students who can see the image won’t necessarily know what is educational about it, but they might. In other words, the educational purpose might be obvious to someone who can view the image, but it isn’t obvious to someone who can’t view the image.
For a student who cannot view the image, the informational content must appear in real text in some way that is accessible to the student using assistive technology, typically screen reading software. That readable text can be in the form of:
- An alt text description that is part of the HTML code, but is not viewable on the screen
- A descriptive caption for the image that can be read by sighted people and read by screen readers
- A description of the educational content conveyed by the image in the surrounding paragraph text.
Creating good alt text is largely dependent on context to determine what should be included in the alt text, caption, or surrounding paragraph. It is not necessary to describe the whole image; rather, the parts that are relevant and complimentary to the paragraphs surrounding the image. For example, consider an image of vegetables.
The alt text might be very different if the context is about preparing your garden for harvest, the increasing cost of fresh produce, or low glycemic vegetable choices for people with diabetes. The alt text on the image above is "tomatoes ripening on a table, soon to be made into sauce"; another completely different context. It is important to remember that images should compliment and reinforce the surrounding content, not replace it.
A decorative image in an online course is one that does not convey important educational content. They are often used for layout purposes, humor, or branding. For example, if you post a fun Announcement item stating that today is National Fluffernutter Day with an accompanying photo. A student who is unable to view the image is at no educational disadvantage by missing this image. There is no need to explain the image to the student either. Your text announcing that it is Fluffernutter Day is sufficient for them to grasp the intent.
Images that are for decorative purposes do not need to be explained to students with no or low vision. To properly communicate the fact that the image is decorative, you need to use null alt text so that assistive technology can inform the student that the image is not important to the educational content of the topic. In Brightspace, null alt text is entered by checking the box during image insertion.
It is important to understand that null alt text (the code alt="") is not the same as no alt text, where the alt text attribute is completely missing. If null alt text is entered, assistive technology will ignore the image altogether, which is a good thing since it conveys nothing important. However, if the alt text attribute is completely missing, then the student will be told that there is an image, and they will wonder what they are missing since there is no alt text to explain the importance of the image.
Brightspace makes it easy to include alt text when you are using the Insert Stuff tool. You enter the alt text while inserting the image, which automatically embeds the alt text into the HTML code:
Figure: The Insert Stuff tool features the Alternate Text field and a checkbox to indicate decorative images.
How to Check Alt Text in Existing Images
It’s a good idea to review your existing online courses to see if the images have useful alt text. Try various browser-based toolbars and add-ins or extensions that are available for all the major browsers, or try these techniques:
- Chrome™ browser: point to the image with your mouse, right-click and choose Inspect from the quick menu (or use Ctrl-Shift-I on keyboard). A new pane will open at the right of your screen with the HTML code highlighted for that element. You can then view the alt text and other attributes for the image.
- Firefox® browser: point to the image with your mouse, right-click and choose Inspect Element from the quick menu (or strike the Q key). A new pane will open at the bottom of your screen with the HTML code highlighted for the element.
When simple alt text is not sufficient
Some images are far more complicated than others, and require much more alternative information than can be handled through a short phrase or sentence using normal Alt Text methods. Examples of complex images include:
- Numerical charts and graphs, flow charts, organizational charts
- Diagrams and illustrations
- Infographics or similar information-heavy graphics such as word clouds
- Maps
- Photos with a great deal of information that is important to the learning process
Long Descriptions
The Longdesc attribute is an HTML attribute of an image that provides information when the shorter alt text option does not adequately describe the information in an image. The Longdesc attribute is not visible on screen, so that information is typically available only to students using assistive technology.
NOTE: In Brightspace, if you want to use the longdesc attribute, you need to manually enter it in the HTML code. For more information, refer to Using longdesc
Audio Description
If it’s not possible to include long descriptions, another option is to provide a link to an audio recorded description of the image.
Watch the video from Karen Sorensen (Portland Community College) on how J
Data tables as alt text for charts
Most data charts easily display as tabular data. The tabular data is real text, so it’s very accessible and provides an excellent alternate description for the chart image. For example
Figure: A pie chart with three segments, described fully in the table below the image.
Property Type- Percentage of the whole property
Marsh - 56%
Croplands - 28%
Uplands - 16%
In some cases, tables also provide the ability to sort and interact with the data, which can provide additional benefits to all students.
Infographics and word clouds
Inforgraphics are popular in online course because they are generally attractve and informative - as long as you can see them. It's possible to find infographics that are web accessible, but that isn't always the case. If you intend to use an infographic, ensure that you are adding the appropriate text to make them informative to all your users.
Word clouds have also found a place in online education, but they do not often add much to the surrounding content. They're fun, and novel, but mostly decorative. If you want to use them, ensure that you structure the raw cloud data using ordered list elements.
For more information, see WAMOE, the Web Accessibility MOOC for Online Educators; co-created by Karen Sorensen of Portland Community College and Barry Dahl of D2L.
