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 – 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 access
2. Use SVG images
- convey 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 They allow for better scaling 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.
...
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/
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
This can be achieved in Whitehall publisher through markdown on bar charts only.
...
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 makes 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 information comes from https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices (you’ll find live demos here, too).
To make page structure, menus, images, tables, forms and carousels more accessible, see https://www.w3.org/WAI/tutorials/images/complex.
Resources
For Microsoft documents
Accessible graphs at Harvard
Accessible What they’re doing at Harvard https://accessibility.huit.harvard.edu/%E2%9C%8E-technique-describing- graphs
Free webinars
webinars https://commonlook.com/accessibility-training/on-demand-video-webinars/
Alternative text flow chart examples
...
https://accessibility.psu.edu/images/flowcharts/
Web Content Accessibility Guidelines (WCAG) 2
How to meet WCAG: https://www.w3.org/WAI/WCAG21/quickref/
...
Related articles
| Content by Label | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
| hidden | true |
|---|
...