A plan for accessible charts

Author Benjy Stanton
Date 17 September 2018 (updated 16 April 2021)
Categories Accessibility Data SVG

A list of user research findings, accessibility report findings, best practice, resources and good ideas that I’ve collected. Last updated on 16 April 2021.

How to make accessible charts

Keep the layout simple and mobile friendly
Present the information in more than one way
Use clear, readable typography
Check the chart is understandable in black and white
Label the data directly
Don't use light shades and colours
Use valid, semantic mark-up
Interactive elements should be controllable with a keyboard
Use vector formats that can be zoomed-in (like SVG)
Consider using patterns or textures to distinguish bars and lines

Read on for more detail.

Colour

Check colour meets contrast standards
Don’t use colour alone to convey meaning
Consider colour blind users (use colour blind simulators to check)
Charts should be readable in black and white
Check design works in high contrast mode

Update on 5 December 2018

Thanks to Henry for suggesting these points about how colour is used by data visualisation producers…

Colour also has semantic meaning. Be careful to check what those colours could mean for people. Meaning also varies culturally so may mean different things outside what you're used to.

Be mindful that when using colour to represents your data that it shows the relationships in your data. E.g. if your data is different categories, your colours should be as distinct as possible. If your data is sequential or represents a range, colour should change in a sensible way. Lab and HCL colour spaces calculate colour based on the way the human eye works, rather than how computers calculate colours.

Line and bar style

Consider using patterns or textures to distinguish bars and lines
Increase minimum size of elements in chart
Label the data directly (instead of a separate keys or legend)

This game on the Apple app store uses some nice patterns to help make the game usable for people with colour vision deficiency.

Present data in alternative ways

Use titles and descriptions to support the chart
Allow users to view data in an html table
Allow users to download the data as a spreadsheet

Interactive elements

Interactive elements must have affordance (for example, links should be blue with an underline)
Make sure interactive elements are usable without a mouse
All interactive elements should have a focus style
Tool tips can help some users to read charts, especially users with cognitive conditions
Download links labels must include file format and size
Headings, links and button text must be unique and descriptive
If an experience cannot be made accessible, create another route for users to get that information

Typography

Use a minimum font size
Use consistent font and spacing
Lines are less than 80 characters wide
Avoid italics and block capitals
Use a san-serif font with thick letters
Make sure text can be resized
Test the content doesn't overflow or become truncated when font size is increased
Nest headings in order (for example, H2s only appear after H1s)
Don't skip heading levels

Layout

Design with a mobile-first mindset
Use a consistent design
Use simple, well known chart types that users are more likely to understand
Create a limited number of reusable templates
Strive to use a simple design
Reading and navigation order is logical

SVGs

Use SVG because they are scalable
Users can zoom in and they won't become pixellated
Structure the SVG carefully, so that it makes use of their accessible powers
Use ARIA tags to improve accessibility
Tips for Creating Accessible SVG
Making SVG accessible
Accessible SVG line graphs
How to Make Charts with SVG
Reliable and Valid SVG Accessibility

HTML mark-up

Use figure element to wrap the chart
Use figcaption for the chart title
Use footer inside the figure element to contain any notes or citation information
Read Alt vs Figcaption by Elaina Natario