Basic principles

There are several guiding principles for guiding accessible charts and graphs:

  1. Never rely solely on colour to convey information
  2. Use multiple ways to convey the information
  3. Where possible, include the key information conveyed in a chart or graph in the main body of the text

These derive from two guidelines found in the definitive guide to web accessibility, the Web Content Accessibility Guidelines (version 2.0):

WCAG 2.0 Guideline 1.4.1—’Colour is not used as the only visual means of conveying information…’

WCAG 2.0 Guideline 1.1.1—’All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…’

Line graphs

Imagine you are colourblind and that all colours appear as various tones of grey. Copy and paste your graph into this page to see what it looks like.

Often lines in a line graph - no matter how distinct to a fully-sighted person - are hard to distinguish for the colour blind or partially sighted. There are several approaches to overcome the problem:

Line styles Use different line styles to differentiate between your lines. To do this in Excel:

  1. Right-click a line on your graph
  2. Select Format Data Series to open the Format Data Series window
  3. Click the paintcan icon
  4. Go to the Dash type field and click to open a choice of line styles
  5. Select a style and the line will immediately change to that style
  6. Use other controls (colour, width) as required

Give each line a style which suits it (i.e. long dashes are suited to relatively straight lies, dots suit more changeable lines).

Distinct tones Rather than different colours, use different tones of one colour e.g light blue, medium blue, dark blue, where the tonality distinguishes between the lines.

Label each line Use your cursor to click on the last data point on a line. You should see a small square with four tiny blue circles at each corner. Click XXX to make the data appear in the box. Now it’s big enough to edit. Click inside and type the title of the line e.g. ‘vaccination rate’. Go to the Format tab, and select Format background choose white. An option is to format surround, same colour as the line. Then carefully hover your cursor till you see the + symbol and drag and drop the line name to an appropriate place on the line.

Too many lines Obviously, these strategies work best when there are only a handful of lines and they are very distinct. If there are many lines closely overlapping...

Bar charts

As above, imagine you are colourblind and that all colours appear as various tones of grey. Copy and paste your graph into this web tool to see what it looks like.

There are at least two strategies to make bar charts more accessible.

Colour Use colours which appear distinct when seen in monochrome. Alternatively, use varying tones of one colour e.g. dark, medium and light blue.

Shading and texture Just as we use different styles of line, we can use different shading styles for different bars, using stippling, cross-hatching etc.

Label each bar Unlike lines, bars come with a space often large enough to accommodate a data value. Where possible include these in the bar. To do this in Excel, right-click XXX

Text / background colour contrast However, care must be taken to make sure the contrast between foreground text and background colour is accessible. To be precise, WCAG 2.0 stipulates that the contrast between the text colour and the background colour exceeds a minimum ratio, namely 4.5 to 1. If the contrast between text and background colour falls below 4.5 to 1, the Publishing team will fail the graph.

Use this online tool to check the colour contrast of a bar chart.

Alt text in graphs and charts

Government Digital Service guidelines state that the alt text field should be left empty, and as much useful information as possible conveyed in a chart or graph should also be included in the body copy.

Prose summary One way to do this is through a prose summary of the key aspects of a graph.

WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…"

Table Another way present the information in a graph is to accompany every graph with the table of data it is generated from.

Style guidelines for charts and graphs

Chart style Use the ‘Chart titles’ styling from the style menu for the chart title. This makes the title appear in bold to us, but also indicates to a screenreader that this text belongs to the category of chart title.

12 point All text in a chart and graph should be at least 12 point.

Sources

WCAG

If the data in a chart, graph or map is crucial to the content of a Web page, then you must provide a text description of the image. In some cases, a numeric table replicating the chart data could provide additional accessibility.

WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…"
Supplement color-coding of charts with texture, differences in line style, text in graphs or different shades of color to improve accessibility for colourblind users. Charts should be readable in black and white.
NOTE: The default settings of the Chart Wizard in Excel are not colour accessible. Use the formatting tools to change line styles and colours.

WCAG 2.0 Guideline 1.4.1—"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

Government Digital Service

Penn State University

has a useful set of pages about web accessibility with easy-to-understand examples.
https://accessibility.psu.edu/images/charts/

  • No labels