A plan for accessible charts

by on 17 September 2018 in 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 26 May 2020.

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

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

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

Read more about SVGs in this blog post

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

Other resources

Examples of charts across UK government services