Alternative (Alt) Text Guide
Accordions
- Add alt text to all elements, images, flow charts, infographics, etc. that are not already captured in other on-screen text AND are beneficial for the screen reader user to know about.
- Short, descriptive text is best but there are times additional descriptions of an image will be necessary (think complex graphs, maps, flow charts, infographics, graphs, etc). In this case, use a caption, long description, table, or other accessible way to convey content. WCAG 1.1.1
- Example: The alt text for this image of a bar chart is, "Bar graph sharing favorite fruits." There is a caption beneath the image that shares the data in the graph. There is also the option to add the data as an accessible table.
Bar graph sharing favorite fruits by number. Six chose apples, four chose oranges, two chose kiwi.
Favorite Fruits
| Apples | Oranges | Kiwi |
|---|---|---|
| 6 | 4 | 2 |
-
When using an image as a link or button, you must add alt text. A link title can also be added. To do this on an image, once the image is inserted where you would like it to be, click on the image and then select the option to add a hyperlink. Add the correct hyperlink and then add a title. The title should be the location of where the hyperlink takes the user.
-
Do not say “link to” because the screen reader will automatically know this is a link if the image is linked correctly.
-
The alt text should convey what you are linking the user to.
-
Example: an icon of a calendar that links to class 4700 Accessibility Training Calendar. The alt text would read “Class 4700 Accessibility Training Calendar.”
-
If using an image that also has text, alt text will need to be added. Because the text is inserted with the image, a screen reader will not "see" the text. It is best practice to not use images of text, but in case one is needed, be sure to alt text all the text within the image verbatim.
Example: The image below has the words "Servers and Storage. Centrally located and supported." Because that text is embedded within the image, this would need to be added to the alt text. Good alt text for this image would be, "Servers and storage. Centrally located and supported is written in white text on a maroon background with icons of a computer screen, clipboard, lock and briefcase."
