Digitally Accessible Imagery

Text alternatives (alt-text) must accompany images that describe the information or function they represent. In doing so, it enables people with diverse disabilities to access and comprehend the content. Depending on the purpose of the image used, you will need to appropriately utilize text alternatives.

It is also important to use appropriate imagery as it makes content easier for many people to understand, especially those with cognitive or learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content. However, images are used extensively on websites and can create major barriers when they are not accessible.

Imagery Purpose

Below is how W3C defines how to approach text alternatives according to the purpose of the imagery used.
  • Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
  • Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
  • Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
  • Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
  • Complex images such as graphs and diagrams: To convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.
  • Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
  • Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
For a quick overview on deciding which category a particular image fits into, see the alt Decision Tree. If there is a complex infographic, it can be broken down visually with text via Cornerstone to make it more accessible.

alt Decision Tree

  • Does the image contain text?
    • Yes:
      • … and the text is also present as real text nearby. Use an empty alt attribute. See Decorative Images.
      • … and the text is only shown for visual effects. Use an empty alt attribute. See Decorative Images.
      • … and the text has a specific function, for example is an icon. Use the alt attribute to communicate the function of the image. See Functional Images.
      • … and the text in the image is not present otherwise. Use the alt attribute to include the text of the image. See Images of Text.
    • No:
      • Continue to the next question.
  • Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?
    • Yes:
      • Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.
    • No:
      • Continue to the next question.
  • Does the image contribute meaning to the current page or context?
    • Yes:
      • … and it’s a simple graphic or photograph. Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images.
      • … and it’s a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images.
      • … and it shows content that is redundant to real text nearby. Use an empty alt attribute. See (redundant) Functional Images.
    • No:
      • Continue to the next question.
  • Is the image purely decorative or not intended for users?
  • Is the image’s use not listed above or it’s unclear what alt text to provide?
    • This decision tree does not cover all cases. For detailed information on the provision of text alternatives refer to the Image Concepts Page.

Source: W3c's alt Decision Tree

Resources

Published on April 26th, 2024

Last updated on April 26th, 2024