Web Accessibility: Images

Images are used to convey information, act as decoration, and to enhance the message of written content. However, for users who have vision problems or for people who have turned images off to save data, additional information is needed.

Screen readers convert text to speech so that the user can hear the words. When a screen reader finds an image, it looks for alternative text (also known as alt text) that it can read aloud. If it finds none, it might say “image” (Penn State, n.d.) or read the file name (Kalbag, 2017, p. 79), which leaves the user with no information about the image and its importance.

Alternative text

Alternative text, or alt text, provides a text alternative to the image. How you describe an image depends entirely on its context and on how much textual information is already available. It also depends if the image is just for decoration, conveys meaning, or contains text (Lambert, 2018).

Tips:

Alt text should be meaningful. Generic alt text like “photo1” or “dog” doesn’t provide enough information.
Alt text should be succinct. Use no more than two sentences, but aim for one concise sentence when possible (Lambert, 2018).
Describe the information in the picture, not the picture itself (Lambert, 2018). For example:
- Image of Mathematics teacher with students: Mathematics professor Dr. Johnny Brown demonstrates why he is in Purdue's Book of Great Teachers.
- Image of Biological Sciences research: Structure of malbrancheamide in complex with Ca2+ calmodulin.
Use punctuation such as commas or periods.
If the image’s purpose is decorative, the alt text field may be left blank. Decorative images will be skipped over by screen readers (Kent State University, n.d.). It will also let sighted users know that the image is not important (Kalbag, 2017, p. 80).
Do not include:
- “Image of” or “Photo of” in your alt text. If you do, a screen reader will say “Image image of…”
- The name of the photographer
- Keywords for search engine optimization (Kalbag, 2017, p. 81)

Since knowing how to describe an image can be difficult, refer to the Web Accessibility Initiative: An alt decision tree webpage to help when deciding (Lambert, 2018).

Complex images

The alt text field can be too limiting for complicated images such as infographics, charts, diagrams, maps or mathematical equations.

Tips:

Think about how you would explain the content to someone over the phone or via email (Kalbag, 2017, p. 81).
Use a short description for the alt text (Penn State, n.d.) and
Provide the long description as either a caption (see the section below for more information) or link to a different page. This way, users can still get the information quickly but be able to dig in further if they wish (Lambert, 2018).

A good example is on the Web Accessibility Initiative: Complex Images webpage.

Captions for images

These are text descriptions that are displayed on a webpage. Captions provide additional information about what the image is conveying. Unlike alt text, captions are available to all users.

As with alt text, an image requires a caption if it conveys important information. Captions work best for:

Pictures of people or concepts such as Purdue University’s new research aims to optimize farmland use for crops, solar electricity production webpage.
Symbols or signs that require additional explanation.
Complex images such as charts that require alt text and a long description or caption (Penn State, n.d.).

Additional examples are on the WebAIM Alternative Text webpage.

References:

Lambert, S. (2018, April 9). Designing for Accessibility and Inclusion. Smashing Magazine. https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/.
Kalbag, L. (2017). Accessibility for Everyone. Jeffrey Zeldman.
Kent State University. (n.d.). Accessibility examples (correct and incorrect use). Retrieved March 18, 2019, from https://www.kent.edu/web-standards/accessibility-examples-correct-and-incorrect-use.
Penn State. (n.d.). Image ALT text. Retrieved March 18, 2019, from https://accessibility.psu.edu/images/alttext/.