A plan for accessible charts

17 September 2018 • 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

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

← Back to the blog