Accessible data visualisations

Science and Engineering in Government Conference

Alice Hannah

Data Innovation Team, Scottish Government

12 November 2024

Agenda

  • Examples of charts and common accessibility issues

  • How to use colour

  • How to provide alternative text

  • An overview of available guidance

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.

In the Teams chat: 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

  • Text is quite small and difficult to read at an angle

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
  • Palettes for sequential and focus charts are also available

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.

In the Teams chat: 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 source 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

Example - 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.

Example - 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

Guidance & Resources

Scottish Government

Government Analysis Function

Contact