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.

Please take the TrojanLearn: Digital Accessibility course on alternative text to familiarize USC's guidelines on alternative text.

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.

Functional Imagery: Linking an Image

Functional images are used to initiate actions rather than to convey information. When you utilize an image as a link, you need to ensure that the image and links are accessible. To ensure your link and images are accessible, please include title="" for within the link and an alt-text="" description for the image.

Please understand that screen readers already tell users when a link is present so avoid using phrases such as "Link to" or "Click here" as alt-text and titles.

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

Best Practices for Alt Text

  • Describe what the image conveys
  • Do not include "image of" or similar text
  • Keep Alt Text succinct - no more than 4 lines
  • Add additional description in your text as needed
  • Nearly all images, unless decorative, require alt text

Resources

Published on April 26th, 2024Last updated on November 25th, 2024