Making graphs and charts more accessible

When making graphs and charts more accessible you need to make sure everyone can read the main information. Graphs and charts are helpful visually because they provide a snapshot of data that shows trends and conveys key information. So it’s important that we recreate this experience for screen reader users, including people who are visually impaired.

When you set out to create graphs and charts that are accessible, there are some essential things to keep in mind.

Don’t rely on colour alone

It’s good practice to use more than one visual cue to distinguish points of information, such as size, boldness, pattern and colour. These differences provide protections against the information failing to reach its audience.

This is notably true when it comes to colour. People who are colour blind, or partially colour blind, might have trouble reading keys and legends if they solely rely on colour.

When creating graphs, you can use labels, patterns or shapes to distinguish between data. For example, alternating dotted, dashed and solid lines to represent information in a line graph. Remember to keep it simple, as too much information can be overwhelming for some readers. You can show an example of the visual differences in points of data by including a legend (also known as a key). Where possible however, it is best to directly label data points as it makes it easier for people to connect points of information.

One way to test if a graph or chart is understandable for people with low colour perception is to change it to black and white. If the information is still coherent then the graph will be more accessible.

Confirm sufficient contrast

Make sure text labels, axis lines and markers meet the minimum colour contrast requirements so they are clear and easy to read. The standard for colour contrast is outlined in the Web Content Accessibility Guidelines (WCAG) – the internationally recognised standards for digital accessibility. The minimum contrast requirement is 3:1 for large text and graphical elements, and 4.5:1 for regular-sized text. You can use a colour contrast checker to check the contrast ratio of 2 colours.

When including labels and legends, make sure you convey key information with text – don’t rely solely on shapes and colours.

Provide text alternative

For simple graphs, a written summary that explains the key message or trends can be a good alternative for people who are visually impaired. For example, ‘Sales increased steadily from January to July, then declined through December’. This short message can be a simple caption or included in the alt text of the image.

For more complex charts, you might need a few sentences or paragraphs to explain what the graph is showing. In this case, you should write the text below or near the graph and have a link or reference from the graph to the text.

Provide a data table

We usually recommend including the data table, that you used to create the graph, below the graph itself. This is so screen reader users can explore the data themselves if they prefer. When tables are structured and tagged properly, screen reader users often prefer data to be conveyed this way.

It is important to display the x and y axis in the correct rows and columns. In most tables, each row usually represents a category (often qualitative data), while each column represents a variable or measure (often quantitative data such as numbers or percentages). Complex graphs with multiple points of data, such as stacked bar graphs and multi-level pie charts, might require multiple tables to represent all the information. This keeps the tables simple, making it easier for screen readers to navigate.

Below is an example data table with merged cells:

	Coffee		Tea
	Decaf	Regular
Respondent age
18-30	14%	51%	25%
31 or more	18%	48%	34%
Respondent region
Rural	4%	55%	41%
City	12%	49%	39%

Separating this data into 2 tables helps avoid merged cells, which makes it easier for screen readers to navigate. For example:

A) Drink preference by respondent age

	Decaf coffee	Regular coffee	Tea
18-30	14%	51%	25%
31 or more	18%	48%	34%

B) Drink preference by respondent region

	Decaf coffee	Regular coffee	Tea
Rural	4%	55%	41%
City	12%	49%	39%

Consider web/HTML interactivity

For web-based charts, you can consider adding interactivity as long as it follows WCAG requirements. You should make sure it is keyboard accessible and is properly tagged for accessibility. If you’re a developer, you can consider using accessible plugins, such as Highcharts.

Build in accessibility from the start

Designing with accessibility in mind from the outset benefits all readers. Making the data clear and easy to understand, while allowing for multiple avenues to take in information – such as data tables and alt text – broadens the reach of your communication. Implementing these strategies will help to make a positive impact on how people interpret your message, and whether they can do so easily – or at all.

Some resources to help you learn more

• W3C WAI: Complex Images (including charts)
• WebAIM: Alternative Text Techniques