The following 10 tips will help to make your images, charts and graphs more accessible for all GOV.UK users.
1. Good practice means
- do not rely on colour to convey information
- use different styled lines in a line chart or different types of shading in bar charts, rather than colour, to convey information
- where possible attach the meaning of lines or bars to the lines and bars themselves not in a separate legend
- use
- presenting information from top to bottom in a clear hierarchy (no scattered boxes or shapes)
- using legible text, Arial 12, for example – no tiny 8pt text
- ensuring make sure foreground text has a high level of contrast with the background colour
- not using 'colour keys' to navigate − people who are colour blind don’t understand them
- not using lots of graphics as your main way of communicating information
- not overusing tabs that link to one another – it’s bad for keyboard accessconvey as much as possible of the information in a graph or chart in the body of the text
2. Use Scalable Vector Graphics (SVG) images
SVG images are more accessible than JPEGs because they are more easily resized across different display sizes (for example, desktop versus mobile).
What’s an SVG picture?
...
Scalable - Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
3. Write
...
useful captions
...
Users may struggle to connect the dots: “Value A has been on the rise throughout the last 4 years, but decreased significantly during the last quarter… why?” The caption below answers that question.
...
This chart shows global sales figures for Apple Mac computers during the past 5 years (2014 until present). The numbers indicate that sales increase dramatically in every fourth quarter, remain high in the first quarter, then decline rapidly in the second and third quarters. This tendency can be explained by Apple holding its annual event (where it showcases new devices) during Q4. Users buy the newest Macs during Q4 and subsequent Q1, but prefer to wait for newer devices during time periods of Q2 and Q3.
4 4. Use Use shades of the same colour for optimal accessibility
This pie chart passes colour contrast standards, as does the map below.
...
Read more about good and bad colour contrast here: https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/
The ONS has an excellent guide for using colours in graphs and charts.
Check your colour contrast ratio
...
https://www.color-blindness.com/coblis-color-blindness-simulator/
And download the No Coffee vision simulator app to see how your content appears to users with different visual problems.
5. Duplicate data from charts to tables
...
Add words and figures into the charts where possible so you are not solely relying on colours or patterns to convey your message.
7. Give greyscale good visibility
Increase the contrast on greyscale prints by applying dash styles to line series.
This will make makes lines distinguishable even on poor black and white prints. See this live demo.
...
In the following example, compare how easily you can distinguish the sections.
9. Label data directly
10. Use these tutorials to help you create accessible charts and graphs
Much of the above information comes from https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices (you’ll find live demos here, too).
...