Quick Example 1

Open

Left is original, right is more accessible

Changes:

1. Font size and darkness increased (title, axis labels, bar labels)

   1. Ensure that there is enough colour contrast between the bar colour and the bar label colour

   2. Don’t use grey font on white background. Just do black/off-black on white/off-white.

   3. At least 16px for body font, and larger for headers. 10px is the ABSOLUTE MINIMUM

2. Numerical data labels on bars*

   1. Notice that they have $, and decimals are consistent

3. Bottom axis labels simplified (“Billions” instead of very long numbers)

   1. Increases whitespace

   2. Avoids the user having to count all the zeros :P

4. Moved legend to beside the data bars**

   1. More noticeable, and quick to find – separates it from the axis labels

5. Increased whitespace/margins around chart

*

Open

• If the contrast between the data labels and the bar colours is an issue, stick the data labels outside the bars (left image)

• This honestly isn’t super clean. I’d just set the opacity of the bars to 50% and keep the data labels black

• Or do something like the right image

**

For line graphs, this may be a “better” way – don’t do legend entries at all! Just label the lines directly

This helps to decrease cognitive load

Eliminates “search-and-find”

Quick Example 2

• The chart on the left is not accessible, because there is not enough contrast between the yellow pie slice, and the white of the divider lines between the slices

• Darkened yellow pie slice on the right chart has enough contrast with the white

• Check colour contrast everywhere!

General Best Practices

• Provide the chart data in text format (ie in a data table)

  • Screen readers can’t read charts well. They can read data tables.

  • Data visualizations are literally derived from data tables anyway, so it’s barely any extra work for anyone involved

  • Firmware did ask for a “raw” data mode. Having raw data tables available supports that use case.

  • It also helps to have ““plaintext”” tables if something breaks/it’s too sunny out/etc

• Provide alt text for non-text chart elements

  • For the charts in the “Quick Example” do something like “Stacked bar chart of spending on dogs, cats, and other pets in the U.S. from 2011 - 2017”

  • This is for screen readers. TBH, we probably don’t need to do actual alt text for this project

  • HOWEVER writing descriptive text like this for each chart as documentation (internally and for handoff) is good practice and will make everyone’s lives easier