Accessible Data Visualizations

Data visualizations like charts and graphs are naturally complex content with a lot of info to convey. This makes it more important to design and build them accessibly with the tools used to create them.

This guide has some general best practices, as well as specific resources around data visualization tools used here at WWU.

Best Practices

Don't use color alone to convey information

Some color combos can look similar to people with color vision differences and are harder to distinguish, such as red/green or blue/yellow. Using only color to distinguish different lines, bars, or other chart pieces can make it harder to know what that piece is supposed to mean.

In addition to color:

  • Use different patterns or textures (diagonal backgrounds, dashed lines, dots, etc.).
  • Ensure the label of a chart piece is nearby (like the name of a pie chart piece or a graph line).

Ensure any graphics are described

If the data visualization is a static image, the image needs alt text summarizing what it is. 

Since charts tend to be complex images, they should also include a long text description, detailing how the visualization is built, the trends in the chart, and key highlights.

Ensure interactive data is usable by keyboard

If a user can interact or operate the visualization, these controls need to also be usable by keyboard. This may include expanding/hiding content, any visualization settings, or details that appear on hover.

Provide data in multiple formats

Having multiple formats that users can choose allows them to read data in a way that makes sense to them. While some users may understand visuals better, others may understand a text summary or a table of the data more. When possible, provide at least one alternative way to read the data (a table, a long description, etc.)

Resources

Tableau Guides

HighCharts

HighCharts is a data visualization JavaScript library with tools to support chart and data accessibility features. It also comes with an education license.