Accessible charts: a checklist of the basics

Policy details

About this checklist

This checklist aims to help you implement our data visualisation charts guidance and e-learning. It should help you make your charts more accessible and ensure they follow best practice advice.

What does (E) mean?

If a point is followed by (E) it means we have deemed it essential to meet the Web Content Accessibility Guidelines 2.2.

---

Formatting charts

1. Remove chart clutter

Avoid shaded backgrounds, unnecessary borders, patterns, textures, shadows, 3D shapes, unnecessary data markers and thick or dark gridlines. Decluttered charts are easier for users to understand.

2. Use a maximum of ten light grey gridlines

Formatting gridlines in this way will ensure they aid interpretation of the data but do not distract from the main story of the chart.

3. Right align values on the y-axis

When numerical values are right aligned they are easier to read as all the figures are aligned to the right place – units over units, tens over tens, hundreds over hundreds and so on.

4. Make sure chart labels are accessible (E)

Any text that has to live within a chart, such as axis labels, data labels, annotations or legends should be made as accessible as possible.

Use a sans serif font – serif fonts are more difficult to read, especially for people with dyslexia.

Use a font size large enough for all labels to be legible. As images often get resized when published, it is not possible to suggest a specific minimum font size. Instead, this is something that needs to be judged when creating the chart.

Make sure all text is horizontal. If it is difficult to fit the chart labels into the space, try transposing the chart or changing the units. You could also drop some of the labels – for example, by labelling every other year in a time series. If you do this, use tick marks to show the regularity of the data.

Use commas to separate thousands on chart label values.

Only use colours that have the required level contrast with the background. See our colours guidance for more information on this.

5. Correctly position axis labels in relation to the tick marks

Axis labels for continuous data should be aligned centrally on tick marks. Labels for categorical data should be aligned between tick marks. You should always aim to label the final tick mark if possible.

---

Publishing charts

1. Place chart titles, source information and footnotes in the body text (E)

Presenting titles, source information and footnotes within an image may fail accessibility success criterion 1.4.5 Images of Text. Instead, this information should be in the body text of the document or webpage.

Images of text may be difficult for some people to read and users of screen reader software would be likely to miss this content completely.

2. Use the Scalable Vector Format (SVG) for images of charts

If you publish your charts as images use the SVG format. The SVG format retains clarity even when users zoom in to a high degree.

3. All charts should have at least one title (E)

All charts should have a formal statistical title that states what the data is, the geography the data relates to and the time period shown.

It is best practice to also have a ‘headline title’ above this which communicates the main message of the chart.

One of these titles should have ‘Figure n’ at the start. This aids navigation for all users. For screen reader users, it tells them a chart or table is coming up.

4. Tag chart titles correctly (E)

Whether you publish your chart in a document or on a webpage, the background code will have ‘tags’ for the heading structure.

These tags help users understand the structure of the document by putting visual cues on section headings and subheadings (for example, different font sizes and bold text).

They also help screen reader users to better understand document structure. Screen reader software reads out tags and screen reader users use them to find the content they need.

5. Provide a text alternative (E)

All non-text content must have a text alternative that serves the equivalent purpose. This is stated in accessibility success criterion 1.1.1 Non-text Content.

This helps people understand the content communicated in images. Some users may not be able to see chart images, others may not be able to understand content communicated in this way.

The text alternative may be a data table, a text description of the message the chart is presenting, or both.

Whatever form it is in, the text alternative should, ideally, come immediately after the chart itself, in the body text of a webpage or document.

We advise to put the text alternative in the body text and not in the alt attribute which sits in the code behind the image. This is because many different users may need the text alternative, and the alt attribute is not easy to access unless you understand HTML code or use screen reader software.

If the text alternative is a text description it should start by describing the type of chart. For example, “a line chart showing . . . “.

6. Mark images of charts as decorative

Marking images of charts as decorative means they have nothing in the alt attribute. This means a screen reader user will skip directly from the chart title to the text alternative (which should be directly underneath the chart). This improves the flow through a document or webpage.

This is our advice, unless the chart image links to a larger version of the chart. In this situation the alt attribute should say something like “Larger version of figure n”.

7. Charts should match the width of the text around them

A chart should follow the flow of the content. It should not be much wider or narrower than the text around it.

8. Give and link to data sources

Data sources should be given in the format: [publication or source of data] from [organisation]. They should be hyperlinked directly to the source.

This improves transparency and can help users understand the data.

9. Provide data downloads for each chart

Providing data downloads improves transparency and allows people to accurately recreate charts for their own needs.

The data download should be in an accessible format, usually an accessible Microsoft Excel or Open Document Spreadsheet (ODS) file. More information on how to make these file types accessible is in our ‘Releasing statistics in spreadsheets’ guidance.

The link to the download should state the file type, size, and text specific to the download. Do not repeatedly use the same link text.

Do use something like this:

Download the data for figure 1 (ODS, 5KB)

Do not use something like this:

Download the data.

10. Ensure footnotes are concise

Footnotes should only include important information and only refer to the data used in the chart or table. Having lots of footnotes can make publications very long and difficult to navigate.

When referring to footnotes we advise to use the word note, a number and put this in square brackets, for example: [note 1]. Superscript should be avoided as it is small and can be difficult to read. Also, screen reader software is unlikely to announce text is in superscript, which can be confusing.

---

Bar charts

1. Rank bars by value

It is easier to interpret values on a bar chart when the bars follow an ascending or descending order.

The exception to this rule is when data follows a natural order, like age or time.

2. Gaps between bars should be narrower than the width of a single bar

Doing this makes it easier to compare the categories.

3. Gaps between clusters

In clustered bar charts the gap between the clusters should be wider than a single bar.

If you’re presenting discrete data in clustered bar charts, it is best practice to also leave a small gap between the bars in each cluster to increase contrast and help users work out the meaning of the colours.

4. Think carefully when adding value labels

Value labels on bars can be hard to see if the text is small or if the text runs over the edge of a bar. They may also fail contrast ratio requirements.

But there is evidence that users find them useful. If you want to add them, think carefully about how they are presented.

5. Do not break the numerical axis – it should always start at zero

Even if a break in the axis is clearly signposted, the relative size of bars is still displayed very strongly on bar charts.

We advise that, if starting the axis from zero stops you from telling the story clearly, consider an alternative chart.

6. Aim for a maximum of four categories

Clustered and stacked bar charts with more than four categories can get too cluttered. Try combining some of the categories or using a different type of chart.

7. Avoid legends – if they are used, state the layout (E)

When legends are used, users have to match labels to data using colour alone. This fails accessibility success criterion 1.4.1 Use of Colour.

We should try to avoid legends whenever possible. If they are used, they should be presented in the same order and orientation as the stacks in the bars or the bars in the clusters.

The legend layout should be stated, just above the chart so users know they can match labels using positioning alongside colour.

8. Avoid stacked bar charts when categories have negative values (E)

When negative values are used in stacked bar charts they can be difficult to understand.

They also mean legends are not always laid out in the same order as the categories in the chart.

It also makes it very hard to maintain the required level of contrast between adjacent stacks.

We suggest trying small multiple charts instead.

---

Line charts

1. Lines should not be too thin

When lines are too thin they are hard to see. However, it is not possible to give a definitive thickness measure for lines on line charts as images often get resized when published.

2. Avoid legends – label lines directly (E)

Legends rely on users matching labels to lines using colours. This can be difficult for some users so should only be used when essential, for example when lines are very close together.

Try to place labels on the chart area or at the end of the lines, on the right hand side of the chart.

3. Use black or dark grey text for line labels

It is OK to use coloured text but you need to make sure the text has enough contrast with the background. See our colours guidance for more information.

4. Aim for a maximum of four lines

Line charts with more than four lines can get too cluttered and hard to understand. Other options such as small multiples and focus charts should be considered.

5. Clearly label a broken y-axis

This should be done with a break in the y-axis line and a broken axis symbol.

---

Pie charts

1. Only use pie charts when the categories form part of a whole

If the categories do not add up to a distinct ‘whole’, use a different chart.

2. Do not use pie charts when two or more categories are a similar size

In this situation it is better to use a bar chart.

3. Do not use pie charts with more than 5 categories

If your chart has more than 5 categories, consider combining some of the categories or using a different type of chart.

4. Rank categories by size with the first at the 12 o’clock position

Ranking the categories in this way makes the chart easier to interpret. It also makes it easier to identify the dominant categories.

5. Label categories directly (E)

Label pie chart categories directly. Legends and keys rely on users matching labels to categories using colour alone. This fails accessibility success criterion 1.4.1 Use of Colour.

---

Small multiples

1. Give all numerical axes the same scale

All the numerical axes in a set of small multiple charts need to have the same scale to avoid misinterpretation.