A plan for accessible charts

by on 17 September 2018 in accessibility

A list of user research findings, accessibility report findings, best practice, resources and good ideas that I’ve collected over the past 2 years.

The next step is to create some prototype charts and start iterating. But I wanted to write-up and share the work so far, in case it’s useful to others.

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 colour

By Henry Lau 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

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

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