University of Wisconsin–Madison
Line art image of a person in a circle.

Accessible data visualizations

6 minutes to read | Last updated August 25, 2021

How to make complex data visualizations accessible

What are complex data visualizations?

Data visualizations can be an effective way to communicate complex data sets by providing a visual representation of data through charts, graphs, and maps. Data visualizations make data more accessible by presenting information in an additional format for understanding what the data represents. However, data visualizations are not always accessible to all users, especially people with disabilities.

Common accessibility barriers for data visualizations include: 

  • Prioritizing the visual experience without consideration for people navigating via screen reader
  • Color schemes that are not accessible to people who are color blind or have low vision
  • Interactive elements that are not reachable for people navigating via keyboard

Making data visualizations accessible means that users will not miss important information and that your visualization will be more understandable for everyone.

Communicating data

It is important to make sure that the data you are representing is understandable both within the context of the visualization and as an alternative to the visualization. The following sections will touch on how, why, and when to communicate data using titles and text descriptions, data tables, labels, color and pattern, white space, and interaction.

Communicate data in the following ways

Titles and text descriptions

Be sure to add a text title and description to your visualization so users know the purpose of the visualization and what information they should be taking away from it. Provide a brief description of what the data is conveying. This text title and short description should be placed before the data visualization.

A longer text description is essential for describing the full content of the visualization. A good text description includes:

  • Context for why the data visualization is useful or why it’s intended to to be used, and how it relates to surrounding content.
  • More details about the patterns, trends, relationships, or conclusions the visualization is illustrating
  • A link to a machine-readable format of the data, such as a CSV file

Alternative text

Your visualization should have alternative text so that people navigating via screen reader will know what the visualization is when they encounter it. Learn more about writing alt text for data visualizations.

Alt text for data visualization should include:

  • The type of visualization
  • The type of data
  • Briefly, what the visualization is conveying

Alt text should also mention that a longer description is available in the surrounding text.

More examples of alt text and text descriptions for accessible SVGs. For an HTML tag, the alternative text is set with the alt attribute and a longer text description with longdesc. For an SVG, the title and desc elements can be used to provide text alternatives.

Data tables

Including a data table can make your data more accessible to people navigating via screen reader, as well as people accessing the visualization on a mobile device. However, providing a data table is not sufficient to make your visualization accessible — visualizations are meant to help the user make sense of the data and to illustrate trends and relationships that would not otherwise be apparent to someone reading the raw data table. Some additional considerations for including the data are:

Labels

Label data directly. Having data labeled in context can make the information more accessible in a variety of ways, including not having to rely on color and not having to navigate to the legend to understand the data. 

Two line charts depicting trends of blueberries, raspberries, and grapes. One has a legend, the other has each line labeled directly.

A chart with a legend vs. a chart with direct labeling.

Using Color and Pattern

According to the Web Content Accessibility Guidelines (WCAG 2.0), colors need to have sufficient contrast and cannot be the sole means of communicating information. The following sections will discuss accessible ways to use color and pattern in data visualizations, including considerations for contrast, white space, and pattern. 

Your color scheme should have a high color contrast ratio to meet WCAG AA or AAA color contrast accessibility standards. Your color scheme should also be accessible to people who are colorblind.Learn more about color palettes and accessibility features for data visualization. Here are some additional steps you can take to ensure color contrast accessibility:

  • Use a color contrast checker to ensure high enough contrast ratios
  • Use tools such as Colorsafe to create an accessible color palette
  • Use a simulator such as Coblis to see what your color scheme might look like to someone who is colorblind

White space can help distinguish elements of your visualization, and prevent confusion based on color. The following bar charts illustrate the difference between a chart with no divider line, and a chart that uses a white divider line to distinguish all three colors in the bar chart.

Two bar graphs with three different color sections: blue, purple, and green. In the second graph, there is a white divider line between each section making it easier to differentiate.

Trying to communicate an aspect of your data exclusively through color means that some people might miss the information that you are trying to convey. 

Interaction and animation

  • Any action that you can perform on the data visualization with a mouse should also be able to be performed when navigating via keyboard.
  • Avoid flashing animations that could trigger seizures.

Don’t make important information, such as labels or legends, only available on hover over. This is difficult to access when navigating via screen reader or keyboard, or on mobile devices. Accessibility tips for content on hover or focus.

Get help with accessibility

Resources to get assistance with accessibility at UW-Madison.

Get help with accessibility