Images

The old adage says that a picture is worth a thousand words. But what happens when a user is unable to see the picture? At that point, words become essential.

We typically describe images using alternative text (ALT attribute), captions, or nearby bodies of text. Good alternative text provides the information conveyed in the image, including all text seen in the image and relevant details. It can be difficult to choose where to focus your description and what to leave out, so here are a few rules of thumb:

  • If an image is meaningful, it must have alternative text. Not providing alternative text means that users who cannot see the image will miss information.
  • Focus on context and function. Context often tells us what aspects of the image are most important. An aerial image of UConn might be specifically focused on showing Gampel Pavilion, or it might be a general overview of our landscaping.  Similarly, function can tell us how to describe the image. A magnifying glass icon that serves as a search button should be described as a search button.

If you get stuck formulating your alternative text, ask yourself this: What is the first thing I want the user to see in this image? What is the purpose of this image?

Some images are decorative, that is, not functional or meaningful.  Indicate these with an empty ALT (ALT=""). This signals to screen readers that they are non-informational images.

Please visit this article by WebAIM for more detailed information on writing alternative text.


Last modified July 6, 2018