The following 10 tips will help to make your images, charts and graphs more accessible for all GOV.UK users.
1. Good practice means
- 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 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 access
2. Use SVG images
They allow for better scaling across different display sizes (for example, desktop versus mobile).
What’s an SVG picture?
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 accurate captions or alt text
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. Use shades of the same colour for optimal accessibility
This pie chart passes colour contrast standards, as does the map below.
See the live demo: https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices/
Never use colour on its own to signify something. Add text and figures, too, to make your point clear.
Examples of bad and good colour contrast
In the following example there are orange text links and an orange button with white text, that have low colour contrast (in this case a contrast ratio of 3.1:1 which is well below the recommended minimum of 4.5:1):
In the next example, the green button with white text shows good colour contrast (with a contrast ratio of 4.9:1 which is above the recommended minimum of 4.5:1):
Read more about good and bad colour contrast here: https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/
Check your colour contrast ratio
Check whether your colour combination is accessible on these sites:
https://accessibility.oit.ncsu.edu/tools/color-contrast/index.php
https://www.color-blindness.com/coblis-color-blindness-simulator/
5. Duplicate data from charts to tables
This can be achieved in Whitehall publisher through markdown on bar charts only.
See examples below (https://coronavirus.data.gov.uk/?_ga=2.243315781.1111519399.1589185613-821964714.1580481485) and learn how to do this at https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown.
The same info is displayed in a table below, thereby giving users options to suit their requirements.
6. Fill in colour below graph lines
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 lines distinguishable even on poor black and white prints. See this live demo.
https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices/
You’ll find accessibility demos for pie charts, line charts, maps, stocks here: https://www.highcharts.com/a11y.html
8. Use white space
When information is too densely packed, the graphic can feel overwhelming and unreadable.
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 info comes from here (you’ll find live demos here, too):
https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices/
To make page structure, menus, images, tables, forms and carousels more accessible:
https://www.w3.org/WAI/tutorials/images/complex
For Microsoft documents
What they’re doing at Harvard https://accessibility.huit.harvard.edu/%E2%9C%8E-technique-describing-graphs
Free webinars https://commonlook.com/accessibility-training/on-demand-video-webinars/
Alternative text flow chart examples https://accessabilly.com/accessible-content-part-5-accessible-graphics/ and https://accessibility.psu.edu/images/flowcharts/
How to meet WCAG: https://www.w3.org/WAI/WCAG21/quickref/