Alt Text
What is it?
Alternative text—or alt text—describes visuals. Embedded in code, alt text is not visible; screen readers voice this image description aloud to blind and low-vision users. Folks with certain cognitive disabilities also benefit from screen readers.
Alt text is different from a caption, which appears near an image, and from longer image descriptions, which are also visible to sighted people.
How do you add alt text to an image?
In Microsoft Word and PowerPoint:
Click the image and select Format along the toolbar. Then, choose Alt Text.
A box appears in which to type an image description.
Click to enlarge images
In Google Slides:
Right-click image (or press Shift + F10 on Windows, Control+Alt+Y on Macs).
You'll see Title and Description boxes.
Though not required, a short title lets a
screen reader user decide whether to
listen to or skip the description.
However, if you plan to convert formats
(e.g. Google Docs to PDF) later, you may want to use only the description box. See Terrill Thompson's excellent explanation.
The major Learning Management Systems prompt you to add alt text when inserting images.
In Canvas, you'll see this prompt:
In D2L/Brightspace, you'll see this note:
How do you write quality alt text/image descriptions?
While there is no magic formula for perfect alt text, here are some best practices:
Be concise.
Alt text is usually not a detailed description of every element of an image. What should you include? That depends! It's crucial that you:
Consider your learning objectives.
Why are you including this image? Is it merely decorative?
(How) Will this image be used in assessments? What precisely do students need to know?
Several instructors could display the same image but write very
different alt text to reflect their unique learning objectives. An art
historian, a French language instructor, and a political scientist, for
instance, would use this Delacroix painting for distinct instructional
purposes and thus should have very different alt text.
Avoid redundancy.
If you describe the image in a caption or in accompanying text, do
not repeat the same information in the alt text. Instead, describe other relevant details or mark the image as decorative.
Mark non-instructional images as decorative.
Some images used, like the swirly divider above, may be strictly decorative and serve no instructional purpose. Verify that no unnecessary text appears in the alt text box. For example, some alt text attributes default to the image file name. The screen reader will say "IMG_03-04-2020_2.png" or "cutecatpic" or whatever the image is named if you do not clear the attribute or mark the image as decorative.
When describing people, should you include references to race, sex, age, ability, or other physical characteristics?
This is routinely debated among web accessibility
specialists and blind folks. There's a tension
between providing full access to visual information
and avoiding accidentally misidentifying individuals.
Check of this Twitter thread for various
perspectives around the place of race in alt text.
Carefully consider the following when describing people:
-
How does the alt text description support learning outcomes?
-
Are you making assumptions about identity? Consider descriptions like "light-skinned"/"dark-skinned" instead of assuming race and "female-presenting" or "person wearing a dress" instead of assuming gender.
-
Are you describing people equitably? For example, if your image includes two people, do you mention identity categories of both individuals? Avoid "norming" certain characteristics or groups.
How would you describe the people in these two photos?
Photo by NASA Photo by Johnny Jenkins or Will Counts
Check out the following resources for more on describing people:
Advanced
Tooltips
Alt text does not automatically pop up when you scroll over the image.
To do this, add title="Text here" to the image code. Note that this only works for short descriptions.
For example, here's the code for the image of the cat to the left:
<img src="CatToolbar.gif" alt="Photo of beautiful gray cat with piercing green eyes" title="Photo of beautiful gray cat with piercing green eyes" style="width: 414px; height: 371px;">
How to Check for Alt Text Visually
Right-click the image (or press Shift + F10 on Windows, Control+Alt+Y on Macs) and select Inspect.
Then, look for alt=" within the image tag <img
The text that appears between quotation marks following alt= is alt text.
If alt= is followed only by a set of quote marks, like alt="", the image has been marked as decorative and purposefully left empty.
Unfortunately, you will often encounter either no alt text at all or bad alt text, like file names instead of image descriptions.
