Alternative Text for Images
Alternative text (alt text) provides access to non-text information like images or other graphics by providing descriptions that are read aloud by screen reader software or provided in text on screen for those who can not see the image.
What you decide to write as the alt text is highly subjective and depends mostly on the context of why you are using the image. Alt text is meant to convey what information about the image is most important, not necessarily a full description of the entire image.
Main considerations
- Every image must have alt text. Without it, screen readers will either default to reading the file name, which can be confusing or meaningless, or skip the image alltogether.
- Most screen readers announce the presence of an image before reading the alt text, so avoid using "photo of," "picture of," or "image of" in your description as it will be redundant information to a screen reader user. Exceptions are if including tehse words helps convey futher meaning such as "arial photograph."
- Some images are purely decorative and can be marked as such (different platforms do this in different ways). If removing the image entirely would make no difference to the information being presented, you can mark it as decorative. If in doubt, provide alt text! Purely decorative images are rare.
- When providing alt text for a chart, you don't need to list every datapoint, just be sure to list the axes and the main takeaways of the chart.
- Any image that contains text should have all of that text present in the alt-text. Screen readers can only interpret machine-readable text (text you can highlight with a mouse). Any non-machine readable text needs alt text.
- The context in which an image is being used is vital to effective alt text. For this reason it is recommended to avoid using automatically generated image descriptions as these results will always be devoid of the context of the image's use. See the examples below for more on the importance of context in alt text.
Alt text rule of thumb: Use one to two sentences and describe the image as if you were describing it to someone over the phone.
Examples
If you are using an image in a directory, or a profile picture, the alt text likely just needs to be the person's name and not a full description of the image.
In this context, for the following image "Joe Lutovsky" would be appropriate for alt text without mention of how cool that shirt is.
The next image is a picture from an DSU commencement. Thinking about the purpose for sharing the image (its context) will help decide what alt-text would be most appropirate:
- If the image is being used just to highlight commencement, the alt text could be, "DSU commencement at the Fieldhouse"
- If the scale of commencement is important for context and that is not provided in text on the page for all to read, the alt text could be, "DSU commencement at the Fieldhouse with hundreds of graduates seated on the basketball court and hundreds of spectators in attendance"
- If identifying the speaker on stage is a main reason for sharing this image, say for a dean addressing a college's graduates, or in this case the commencement speaker, the alt text could be, "Commencement speaker Kevin Flynn addressing graduates"
- If this image was being used by the vendor who chairs and stage equipment, the alt text would likely include something about that too because they would be sharing the image to highlight their services.
General Resources
Regardless of what platform you're working with, the following resources are helpful.