Add alternative text, or “alt text,” to every meaningful image in digital content.
Introduction
There are two groups of people you need to consider when using or creating images in digital content:
- Those who can see the images.
- Those who can't.
It may seem obvious that you'll need to provide the information in an alternative format for people who can't see your visuals—those who are blind or visually impaired—but sighted users who disable image loading or encounter a broken image also won't know what the image is meant to convey.
No alt text demonstration
Someone might see an icon like the above if the link to an image is broken and no alt text is provided.
Best Practices
Provide alternative text for meaningful images
Understanding what meaning your image provides to someone reading your document, website, presentation, or other media is crucial for writing useful alt text.
Ask these questions when writing alternative text:
- What is the content conveyed by the image in this context?
- What meaning would be lost if this image disappeared from this page?
Use these questions to write clear, concise alternative text that describes the image in context. Alternative text should be different from surrounding text, like captions or nearby paragraphs.
If you're unsure of whether your image needs alt text, use the Web Accessibility Initiative's alt decision tree. Images that are purely decorative should have a null alt text attribute.
Alternative text examples
| Context | Alt Text - Description of the Image | Caption - Extra Information about the Image |
|---|---|---|
| Spirit squad website | Goldy Gopher raises arms in front of a crowd on a basketball court. | Help Goldy cheer on the Gophers at the next home game! |
| Mascots of the Big 10 webpage | Goldy Gopher raises arms in front of a crowd on a basketball court. | Goldy Gopher is the mascot of the University of Minnesota. |
| Goldy in different uniforms webpage | Goldy wears a white uniform with maroon headband in front of a crowd on a basketball court. | Goldy's basketball uniform includes a sleeveless shirt, shorts, and a headband. |
Provide alt text for charts and graphs
You should add alternative text for all charts and graphics derived from data tables, such as from spreadsheets.
However, charts and graphs made from data tables in spreadsheets usually require more complex descriptions than the alt attribute can provide. There are several ways to provide longer descriptions so that all users will benefit:
- Include descriptive text surrounding the image (such as the data table).
- Include a link to a separate page with a longer description.
- In spreadsheets, use the fields provided in some software such as Microsoft Excel and Google Sheets to give more details about the content, including:
- title
- labels
- values
- relationships among variables
- x and y axes
- scale increments