Accessible data visualisations

Scottish Government Accessibility Champions Network

Alice Byers

Data Innovation Team, Data Division

19 October 2023

About me

Agenda

  • Examples of charts and common issues

  • An introduction to the sgplot R package

  • An overview of available guidance for making charts accessible


But first, a quick question: What software do you use to produce charts?

Example

Example 1

A line chart showing a time trend of life expectancy for different countries. The background is light grey with lots of white grid lines. There are six trend lines differentiated by colour with a legend to the right hand side of the chart. The y axis title is at a 90 degree angle and the x axis labels are at a 45 degree angle.

Slido poll: What could be improved?

Example 1

A line chart showing a time trend of life expectancy for different countries. The background is light grey with lots of white grid lines. There are six trend lines differentiated by colour with a legend to the right hand side of the chart. The y axis title is at a 90 degree angle and the x axis labels are at a 45 degree angle.




  • Cluttered; lots of grid lines, lots of colours, lots of data

  • Poor colour contrast with background and with other colours

  • Angled text not easy to read

Colour

Things to think about


A line chart showing a time trend of life expectancy for different countries. The background is light grey with lots of white grid lines. There are six trend lines differentiated by colour with a legend to the right hand side of the chart. The y axis title is at a 90 degree angle and the x axis labels are at a 45 degree angle.

A line chart showing a time trend of life expectancy for different countries. The background is light grey with lots of white grid lines. There are six trend lines with a legend to the right hand side of the chart. All lines are black. The y axis title is at a 90 degree angle and the x axis labels are at a 45 degree angle.

  • Contrast with background
  • Contrast with other elements
  • Reliance on colour

Colour palettes

Colour name Hex code Example of colour
dark-blue #002d54
teal #2b9c93
purple #6a2063
orange #e5682a


  • Other palettes available for sequential and focus charts (with caveats)

Example

Example 2

A line chart showing a time trend of life expectancy for different countries. The background is white with light grey, horizontal grid lines. There are two trend lines, one dark blue and one turquoise, with a legend to the right hand side of the chart. All text is horizontal.

Slido poll: What could be improved?

Example 2

A line chart showing a time trend of life expectancy for different countries. The background is white with light grey, horizontal grid lines. There are two trend lines, one dark blue and one turquoise, with a legend to the right hand side of the chart. All text is horizontal.




  • No way to link data lines to legend without colour

  • Meaningless axis label

  • No title, subtitle or source

Example 3

Living Longer

Life Expectancy in the United Kingdom and China 1952-2007

A line chart showing a time trend of life expectancy for different countries. The background is white with light grey, horizontal grid lines. There are two trend lines, one dark blue and one turquoise. The lines are directly labelled with the country they represent. All text is horizontal.
Source: Gapminder

Alternative Text

Forms of alt text

  • Commonly sits in the code behind the chart to be read by screen reader software

  • However, it can also be:

    • a text description in the main body of the page

    • a table of the data presented in the chart

Text description


The life expectancy for both the United Kingdom and China have increased between 1952 and 2007. The United Kingdom has consistently had a higher life expectancy than China throughout this period.

Data table

Year Life Expectancy
China United Kingdom
1952 44.0 69.2
1957 50.5 70.4
1962 44.5 70.8
1967 58.4 71.4
1972 63.1 72.0

sgplot

sgplot

Example - ggplot2 defaults

Code 
library(ggplot2)

dat <- data.frame(
  shop = rep(c("Shop 1", "Shop 2"), each = 2),
  fruit = rep(c("Apples", "Bananas"), times = 2),
  number = c(5, 4, 6, 2)
)

ggplot(dat) +
  geom_col(aes(x = shop, y = number, fill = fruit),
           position = "dodge")

Example - sgplot defaults

Code 
library(sgplot)

use_sgplot(base_size = 14)

ggplot(dat) +
  geom_col(aes(x = shop, y = number, fill = fruit),
           position = "dodge")

Future Developments

  • Support for interactive chart packages

  • Use Roboto Google font as per Scottish Government design system

  • Anything that would make your life easier!

    • If your team has its own branding style and/or colour palettes, these can be added to sgplot (as long as they’re accessible!)

  • Open to feedback and suggestions

Guidance & Resources

Scottish Government

Government Analysis Function

Contact