ºìÌÒÊÓÆµ

Teaching with Technology

Information Technology

Digital accessibility: charts and graphs

Graphs and charts often rely on color for information and can therefore be inaccessible to people with different visual impairments. Graphs and charts also visualize complex information and may be hard for people with cognitive impairments to understand.

Provide your data

To make your graphs and charts accessible to everyone, provide your data along with the visualization. You can do this by including a data table in the same document or by linking to the data in the chart caption.

Use color carefully

Many graphs and charts use color to differentiate between variables. 

Any time two colors are adjacent to one another, or any time color alone is used to convey meaning, the contrast ratio between colors must be at least 3:1. 

This contrast ratio can be hard to achieve in graphs or charts that use multiple colors.

In order to make charts more accessible

  • Use different shapes for points on line graphs and scatter plots so that meaning doesn’t rely on color alone.
  • Add high-contrast borders to shapes on bar charts, pie charts, and other data visualizations to create contrast between adjacent colors and the background.
  • Consider using patterns along with or instead of color in bar charts, pie charts, and other data visualizations. Keep in mind, however, that too many contrasting patterns may be distracting to some people.
  • Add labels close to data points to help the viewer distinguish between different data points without relying on color alone.

Include labels

Your graph should include a title, labels for the horizontal and vertical axes, and any other relevant labels.

  • Labels should be in at least 11-point font. Depending on how you share your graph, labels may appear smaller than they do in your graphing software. Test out your graph in its final destination to ensure that labels are large enough.
  • Extra white space is often helpful. Balance the benefits of adding additional labels with the need to keep visual distraction to a minimum.
  • Include a caption for your graph. If necessary, include further information about abbreviations or terminology used in the graph in your caption.

Add alternative text

All graphs and charts must have alternative text. Writing concise alternative text for data visualizations can be difficult. In general, alternative text should be only one or two sentences long.

Remember to provide your data along with your graph or chart. Providing the data will help people who use a screen reader to better understand what you include in your alternative text.

  • Focus on the purpose of the graph or chart. Do not provide an in-depth description.
  • Include information about the type of graph or chart and the variables on the horizontal and vertical axes.
  • Text labels for graphs made using graphing software may be included as part of an image and not accessible to screen readers. Make sure to include any information contained in labels in your alternative text.
  • Depending on the purpose of the graph or chart, it may be helpful to include information about any trends visible in the data.
  • It is not necessary to repeat information contained in the caption of the graph or any other text area accessible to a screen reader.
  • If necessary, create a longer description that is accessible by link.