Text alternatives for images are important for visually impaired or blind learners, but they’re also useful for learners on mobile devices and learners with slow internet connections. Alt text provides the description of the image for when it can’t be viewed.
In this article, we cover how to write good alt text, and how to actually add it to an image within a content page or task.
How to add alt text to an image element within a page
When adding an image to a content page, simply add your Alt text and Save.
General guidelines for writing alt text
Alt text descriptions should be short and concise - aim for 200 characters or less.
Do not repeat information you already have in general text.
Don’t include “picture of” or “image of” in alt text (unless the medium is important), as screen readers already read out “graphic” along with the alt text.
Describe the image in context.
Describe the image in context
Context is Everything. An image of a coffee cup might be used to highlight completely different things in courses on food groups or states of matter. So...
Alt text should describe the image in context based on what details the image adds to the page and to the learning.
For example, this image of a cup of coffee.
If this image was for a page about breakfast, good alt text could simply be:
Coffee.
To create a more rich experience the alt text could be:
Steaming cup of coffee, among roasted coffee beans.
If this same image was used in a different context - for instance a science course states of matter - appropriate alt text might be:
Excited molecules of water rising as steam from a cup of hot coffee.
How to write alt text for different image types
Informative images
Informative images are any images that add to the context of a page. That is, if the content of a page would suffer if an image was removed. For these images, alt text should be at least a short description conveying the essential information presented by the image. As much as possible, alt text should be equivalent in representing content and function of an image.
Decorative images
Decorative images add visual decoration to the page, rather than convey meaning or information that is important to understanding the page. You do not need to provide any alt text for these images.
Complex images
Complex images are things like graphs and diagrams that are used to convey data or detailed information. These images should have an accompanying long description (or data) on the page and the alt text should refer learners to this long description (see Complex images or images with a large amount of text for more).
Groups of images
If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Further resources for writing alt text
The Web Accessibility tutorial Image Concepts has the basics of what to do for alt text. And if you’re not sure what kind of alt text you should provide, try out their Alt Decision Tree.
Alternative text from Webaim is full of examples of alt text based on the context of a page. We highly recommend reading these sections from their article:
And if you have the time, Image Description Guidelines from Diagram Centre has thorough explanations of how context and audience should affect alt text and examples of every kind - including tree diagrams, flow charts, geometry, and maps.