Page header image
September 28, 2020: Learn about alternative text
Accessibility Goal of the Week
This week, our goal is to learn the WHAT and WHY of alternative text, or alt text as it's commonly called. Read the information below and view the videos. Next week, we will discuss HOW to add alt text to your course content.
What is alt text?
Alt text is text that describes a digital image, usually in 1-2 sentences. It is not visible onscreen, but rather is part of the coding of the page. Screen-reading software (software that voices onscreen content) will detect and read aloud any alt text attached to an image.
Why is alternative text necessary?
The existence of alt text is crucial for students who rely on screen-reading software due to blindness or low vision. Screen-reading software can only read text, not images or non-text graphics. Therefore, if no appropriate alt text is present, a reader who cannot see your document will only hear the word "image", or sometimes a slew of gibberish (often the result of the screen-reader reading the dimensions of the picture). In short, it will not convey what the image is or what function it serves.
Here is a video demonstration of a common screen-reading program (JAWS) reading a page with an image with no alt text added. Once you press play, close your eyes.
Reflect on what you heard. Did the information lose you after the words "six million"? Were you able to identify the three main parts of the brain?
Here is another video with JAWS reading the same page but with appropriate alt text added. Again, close your eyes after you press play.
Reflect on what you heard. Were you able to identify the three main parts of the brain this time?
Alt text should not repeat what is already stated in captions or other document text. Consider the following example:
Caption: Disability rights advocates used many different methods for prompting change.
Notice that the caption does not really describe WHAT the image is. Add in alt text to give a description of what we see here. Try and stick to 1-2 sentences. Maybe something like:
A photo of disability rights protestors gathered on a New York City street prior to the passage of the Americans with Disabilities Act with a banner above them reading "Injustice Anywhere Is A Threat to Justice Everywhere - Martin Luther King, Jr.".
For images like charts or graphs that require more than a 1-2 sentence description, consider linking to a Word document with a longer description. Some images may be added to a page just for decorative effect and are not integral to the context. In those cases, it is possible to mark the image so a screen-reader will skip it completely.
Fun fact: Alt text also makes web pages more accessible to anyone who is browsing on a weak internet connection or a small portable device like a smart phone. The alt text labels become visible while images are loading.
Do you feel a little more familiar with the concept of alt text? Tune in next week to learn how to add alt text to your images.