Alt Text for Charts, Graphs, and Diagrams

This page is meant to be preceded by the more introductory alternative text page titled, Images - Alternative Text (Alt Text). If any of the terms used in this page are unfamiliar please refer to the preceding page.

Complex images, such as charts, graphs, diagrams, and infographics may require using something in the place of the alt attribute for an <img> element. Your choice of how to provide alternative text for a complex image will depend on the purpose of the image, the amount of information conveyed in the image, and the content also present in the body of text on the page near the image. (Note: This pages uses the longer phrase alternative text in place of alt text to avoid confusion with the alt attribute for an <img> element. Not all alternative text is provided via the alt attribute.)

One method to mitigate overly long descriptions in the alt attributes to use something often called a "Long Description". A long description may look like a bulleted list in a separate page that is linked to via a caption or other piece of text near the complex image on the page. It may also be possible to provide the long description in the surrounding text which benefits everyone reading the material.

Relevant WCAG 2.2 Guidelines: 1.1.1 Non-text Content

Main Considerations

Describe the type of chart or diagram that is being used. For example, you could start your alt text description with phrases like "pie chart" or "whisker plot diagram".
Consider the purpose of the image within the context of the surrounding content. Include descriptions of the salient features of the image ensuring to include any information that may be needed to answer questions that refer to the image.
Avoid repeating text in the alternative text that is already present in the main text. For example, if a paragraph under a graph describes the shape of the curves, this information does not need to be repeated in the alternative text.
Avoid overly long descriptions in the alt attribute for an <img> element. (Recall that the alt attribute should try to have a character count under 125 characters.)
If the image has a lot of detail that is relevant and requires a longer description, include a short description in the alt attribute, and then beneath the image, provide a link to the data table or a long description of the image.

Context Should Guide the Choice of Language

When incorporating a chart, diagram, graph, or other image that is conveying a lot of information it is vital to think about how the image needs to be used by the reader.

Is the image a part of a quiz question? Can the reader answer the question(s) with the alternative text you are providing?
What are the learning objectives that relate to the image? Does the learning objective want the student to interpret information in the image?

For more reading, please look at UC Irvine's page dedicated to Making STEM Content Accessible. You are also encouraged to schedule a time to meet with someone from the Center for Teaching and Learning to discuss how you can make complicated images accessible, email us at ctl@wou.edu.

Example for Chart or Graph

The example below borrows content from a wikipedia article. If this topic is interesting to you visit the Benford's Law Wikipedia page to learn more.

Benford's law, also known as the Newcomb–Benford law, the law of anomalous numbers, or the first-digit law, is an observation that in many real-life sets of numerical data, the leading digit is likely to be small.^[1] In sets that obey the law, the number 1 appears as the leading significant digit about 30% of the time, while 9 appears as the leading significant digit less than 5% of the time. Uniformly distributed digits would each occur about 11.1% of the time.^[2] Benford's law also makes predictions about the distribution of second digits, third digits, digit combinations, and so on.

Figure 1. Distribution of first digits (in %, red bars) in the population of the 237 countries of the world as of July 2010. Black dots indicate the distribution predicted by Benford's law.

Image Description

It has been shown that this result applies to a wide variety of data sets, including electricity bills, street addresses, stock prices, house prices, population numbers, death rates, lengths of rivers, and physical and mathematical constants.^[4]

In the example above we have some text content before and after the image. There is also an alt attribute provided for the image, a caption for the image, and a link to an image description. (The alt attribute for this image is "A chart depicting Benford's Law".)

The text before and after the image does not provide any specific content that is represented in the image. The caption does provide some general content about the image. The Long Description provides details about the image and attempts to repeat as little as possible.

Note: There is no particular style of writing that is best for long descriptions. Choose a style that you think will convey the information concisely and accurately. In this case we used an unordered list to list out all of the features of the chart that we wanted to convey to the reader.

Key Take Aways
Complex images

When possible Long Description links should not open a new window. This can be disorienting, especially for users with screen readers or low vision. (Note: The default behavior in Canvas is to have all links open in a new window. To change this behavior you would need to delete the target="_blank" attribute from the a tag for the link in the html editor for the page in Canvas.)
Long Description links should immediately follow the image.
The content in a Long Description should repeat as little information as possible that was already provided on the page in text surrounding the image, while balancing with being complete.
Be concise while being accurate. There is no single style of writing that is best for all complex images.

Sources and Other Resources

The Section 508 website covers a broader range of image types including, signatures, logos, watermarks, form elements, background images, etc.
Web Aim Alternative Text
Colorado State University Long Description Tutorial
Benford's Law Image: "Benfords law illustrated by world's countries population" by Melikamp is licensed under CC BY-SA 4.0.
Wikipedia Page: Benford's Law
Making STEM Content Accessible
Special Interest Group on Accessible Computing "Describing Figures"
Guidance for describing complex images. Although this resource focuses on science content, the guidance is also applicable to complex images used in non-STEM contexts.