Making charts accessible – material, links and answers to questions from DataConnect22 session

Recording

Transcript of video including audio description (DOC, 113KB).

We will be adding correctly edited subtitling to this video soon.

Slides

Slides from the presentation (PPTX, 25MB) – this file does not meet digital accessibility success criteria. This means some users may find it difficult to access the content. A plain text version is on this page, linked to from the contents section.

Links

Guidance and support

Information on guidance and support we provide for communicating statistics and analysis

Communicating analysis drop-in clinics

Drop-in with any queries related to communicating data, statistics or analysis. These could be about making content accessible, best practice for data visualisation or advice on written content. These clinics will be held every other Wednesday at 10:30 am via Microsoft Teams. They will be advertised on our events page.

Question and answer (Q&A) session

Questions about dashboards and interactive charts

The most common topic for questions was interactive charts and dashboards – I have put these together in one section.

Questions:

Any recommendations for drafting dynamic alternative chart text where a chart is updated with live data and one static description cannot be drafted?
What about charts in applications which are interactive? How can you provide alt text when you don’t know what chart the user will be looking at?
How do we design interactive data visualisations to be accessible?
Is it possible to make dashboards accessible? (with live data feeds and interactivity). Text explaining charts becomes difficult and takes up too much space
Do you have any specific advice for making dashboards accessible – for example where a chart is dynamic rather than static?
Do you have any guidance on accessibility for charts that users themselves can filter?

Answer:

It is hard to make dynamic charts and dashboards fully accessible. I have been looking into it but I am yet to find a fully accessible dashboard. Providing alternative text is not really possible when a chart regularly and automatically updates itself.

Some tips:

Follow the success criterion for colours whenever possible
Make charts simple – do not try to put lots of data on one chart
Provide the data behind the interactive in an accessible spreadsheet whenever possible
Be up front about the lack of accessibility – make sure your accessibility statement says what is and is not accessible.

More information is in our dashboards guidance.

If anyone makes any progress in this area please let us know, email: Analysis.Function@ons.gov.uk

Questions about legends

Questions:

Could you put text in the legend to say the categories are in same order as chart?

Is it an acceptable solution to label each of the categories on one of the bars or set of bars, instead of having a legend at the top or side?

Answer:

These are both very good ideas. If there is room and it does not cause too much chart clutter, either of these options would be a good way to meet the use of colour success criterion. Thank you for sharing them. These suggestions have now been incorporated into our guidance.

Does hovertext on each data point, along with the ability to toggle each series on or off ensure we meet the criteria?

It would be down to interpretation of the accessibility success criterion and how well such functionality is marked up and signposted. Screen reader software will not be able to access functionality that is not marked up correctly.

I have not yet seen charts with this functionality that I would describe as fully accessible.

Also, if this hover text would result in each data point being read out by screen reader software you should think whether this is really giving a user the equivalent experience to looking at the chart. For small datasets it might work well, but for larger ones it will not be as good as having a well written, descriptive text alternative.

Isn’t the problem with small multiples that you cannot easily judge relative values?

There may be issues with small multiples in some situations. But they are generally good at solving accessibility issues related to colour.

You mentioned a standard for success, which can be applied to charts as well. Could you please share where to find it? thank you

I think you mean the accessibility success criterion. They are available on this website.

Do you have a view on which is better for showing how things make up a whole – a stacked bar chart or pie chart?

Ah, this would depend on the data. Some would say never to use a pie chart. I am a bit more flexible and think they have their place in some situations.

What is ‘too long’ for a supporting table?

I think you mean what is ‘too long’ for a table to be a suitable text alternative. I do not have specific guidance for this. Read your table out to someone and see what they think. Test it with screen reader software yourself. If possible test it with a person who uses screen reader software.

Is the Markdown guidance on GOV.UK comprehensive enough for making charts and tables accessible in HTML?

Sorry I do not know what the exact Markdown guidance on GOV.UK says.

The charts and tables you can create with Markdown on GOV.UK are accessible as far as I am aware. Here are some examples of tables and charts you can create on GOV.UK.

Have you done any user research for people with a learning disability?

No I have not done this. It is something I would like to do.

When publishing reports, when is it better to use a chart versus a table?

This will depend on your data and your users but here is some advice from our guidance on tables:

Tables are useful when:

you want users to compare values
you want to include values and measures such as percentages or indices
you want to include summary statistics such as averages or totals
you need to show values of very different sizes in the same display, for example values in the tens and values in the millions

Charts should be used when you want to show patterns, trends and relationships.

How do the benefits to end users compare with the overhead to producers in training, additional production time and monitoring? What’s the size of the prize?

I do not have the figures to answer this one!

Should bar charts like the childcare arrangements example include tags on each bar which state the exact figures?

This is a choice. Providing value labels on bars or at the end of bars can be useful but can also cause more chart clutter. Sometimes value labels can be very small which can be an issue. You also need to consider the contrast between the label text and the bar colour. Remember contrast requirements are higher for text than for graphical elements – a 4.5 to 1 contrast ratio is needed.

How do you avoid bias about what is the important data in descriptive alternative text?

This is a good question! I would say it is down to your knowledge and intuition as a government statistician or analyst.

Google charts does not allow for use of patterns or ‘texture’ on graphs. How would you recommend we work around that?

I would not necessarily rely on patterns or texture. As mentioned in the slides, textured lines in particular can be mistaken for provisional, forecasted or incomplete data.

Symbols on the lines could solve this?

I think this was in relation to the line chart with eight lines. Data markers can be useful. But they can also cause a lot of chart clutter if overused. The slides on this webpage have an extra slide that shows this. I had to leave it out of the session due to time constraints.

Do you know if GOV.UK HTML charts are still using the now archived Magna Charta script? Or is there a new alternative?

Sorry I do not know what is used on GOV.UK. Best talk to someone in Government Digital Service (GDS).

Is white text on a background not accessible though?

I think this is in relation to the value labels slide. In this example the white text may not be meeting contrast requirements. I did not check this for these slides as this was a screenshot of a something that was tweeted. But white text can meet requirements if the background is dark enough.

Chart description above or below the chart?

I would say directly beneath the chart.

For an accessible data download, do we really need a separate spreadsheet for each chart? I produce a single spreadsheet with all tables (as users want this).

Generally it is considered best practice to provide a specific data download for each chart you publish. This allows users to easily recreate charts. But it is not necessary for accessibility, unless you are relying on the data download as the text alternative.

What about charts/graphs embedded in PDF’s?

Everything mentioned in the session would apply to charts in PDFs. You should follow the colours guidance and provide descriptive text alternatives in the body text.

Normally when making presentations you will have a text description of the graph. I find it hard writing alt text that is sufficiently different from this text.

I am not sure I fully understand this one. If you have a text alternative to the chart you should not need to repeat it.

Do you have an office theme set up for the colours that could be available for download?

This has now been created but the website does not yet support theme files. If you want it, please contact Analysis.Function@ons.gov.uk and we will send it to you.

Plain text version of slides

Slide 1

Making charts accessible: DataConnect22

Slide 2

Welcome

This presentation is from the Analysis Function Central Team. We are here to support everyone working on government data, statistics and analysis.

A hot topic in communication over the last couple of years has been digital accessibility.

Today’s session is about how to make charts more accessible.

If you want to get in contact, use the information on the Analysis Function website.

A plain text version of the slides and the question and answer session will be published on the website. A recording of the session will be published on the Analysis Function YouTube channel.

Slide 3

Accessibility legislation

Slide 4

All content published on public sector websites must meet the level A and AA success criterion in the Web Content Accessibility Guidelines 2.1

The success criterion have to be interpreted and applied to charts.

All our advice is based on interpretation and research. It may differ slightly to other advice.

Slide 5

Empathy

Slide 6

This slide shows nine identical clustered bar charts, each displaying a different type of colour blindness.

Slide 7

This slide shows a line chart and a bar chart, at first in focus, then blurred. This is to give people experience of viewing chart with low vision.

Slide 8

This slide shows a normal clustered bar chart first, then the bars are replaced with squiggly lines. This is to give people experience of what it might be like if you can see a chart but you cannot understand it.

Slide 9

A chart showing how a chart may be displayed within a statistical report. It says:

Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year
Overseas residents’ visits to the UK by month, January 2018 to May 2022
Line chart showing overseas residents’ visits, UK, Jan 2018 to May 2022 (this is the alternative text in place of the chart image)
Source: Office for National Statistics – International Passenger Survey
Download this chart
Three buttons showing “Image”, “CSV” and “XLS”

A chart axis is then shown with number of visits on the y axis and Jan 2018 to May 2022 on the x axis. Two dots are on the chart, one slightly higher than the other.

This slide is meant to give experience of what reading a statistical report may be like for a screen reader user. It is meant to show we are unable to fully understand the data when only given limited alternative text.

Slide 10

Similar to the last slide, this shows how a chart may be displayed in a statistical report, but this time the alternative text is what may come out when a chart is embedded in the HTML code of the page. This slide is meant to give experience of what reading a statistical report may be like for a screen reader user.

The text on the slide reads:

Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year
Overseas residents’ visits to the UK by month, January 2018 to May 2022
Clickable link all visits thousands, Clickable link North America thousands clickable link Europe thousands clickable link other countries thousands. May 22 Dec 21 July 21 Feb 21 Sept 20 Apr 20 Nov 19 Jun 19 Jan 19 Aug 18 Mar 18. Zero comma zero zero zero comma one zero zero zero comma two zero zero zero comma three zero zero zero comma four zero zero zero comma five (this is the alternative text)
Source: Office for National Statistics – International Passenger Survey
Download this chart
Three buttons showing “Image”, “CSV” and “XLS”

A chart axis is shown with number of visits in thousands on the y axis and Jan 2018 to May 2022 on the x axis. Two dots are on the chart, one slightly higher than the other. Four lines are now also added to show the different series on the chart.

This is meant to show that we have slightly more information from this alternative text, but it is hard to understand. We are still unable to understand the data.

Slide 11

This slide shows a screenshot of the data behind the chart in a spreadsheet. Then a black rectangle is put over the data. The presenter reads out an approximation of what screen reader software would read out:

A1 wrap text Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year. A2 Overseas residents’ visits to the UK by month, January 2018 to May 2022. Blank A3, Blank B3, Blank C3, A4 Notes A5 Unit A6 Blank A7 Blank A8 Jan-18 A7 Blank. B7 All visits (thousands) C7 North America (thousands) D7 Europe (thousands) E7 Other countries (thousands). A8 Jan 18 B8 2734 C8 321 D8 1790 E8 623 F8 BLANK G8 BLANK A9 Feb 18 B9 2573 C9 262 D9 1870 E9440. A10 Mar 18 B10 3240 C10 354 D10 2405 E10 480 A11 Apr 18 B11 3404 C11 453 D11 2423 E11528

This slide shows that a screen reader user may get to the data table for a chart but they would have to listen to the data being read out. Listening to a spreadsheet being read out is difficult to understand, particularly when there is no guidance on the spreadsheet to help you understand the layout.

Slide 12

Colours

Slide 13

Success criterion for colours

Text contrast

Text and images of text must have at least a 4.5 to 1 contrast ratio with the background.

Adjacent colours

All adjacent colours in graphics need at least a 3 to 1 contrast ratio. Unless the presentation is essential for communicating a message.

Use of colour

Colour is not the only visual means of communicating information.

Sensory characteristics

Instructions for understanding and operating content do not rely only on components like shape, colour and size.

Some of these will impact on chart elements and chart labels. Others on chart legends. Remember all chart elements are adjacent to the background colour.

Slide 14

The colour palettes in our colours guidance are shown on this slide.

We advise to stick to a four series maximum in charts, but have added two extra colours due to demand.

The colours in the categorical colour palette all have enough contrast with a white background and with the adjacent colours – when used in the order presented in the list in the guidance.

We will discuss focus palettes and sequential palettes in more detail later on in the presentation. The colours in these palettes do not always meet the contrast requirements.

Slide 15

This slide shows a clustered bar chart using our categorical colour palette.

It meets the success criterion for adjacent colours, but not for use of colours as a legend is used to match series names to bars.

To help with legends we always have them in the same orientation and order as the bars. If possible you might want to state this within the chart image – this will help people use the legend.

Due to the issues with use of colour, this type of chart should only be used when essential and the plain text alternative is very important.

Think: do you really need all the clusters? Can you simplify the chart?

Slide 16

This slide shows a clustered bar chart using our sequential colour palette.

It does not meet the success criterion for adjacent colours or use of colour.

The light blue does not have enough contrast with the white background and the mid blue does not have enough contrast with the dark blue.

It should only be used when essential and should be given detailed alternative text – more on this later.

To help with adjacent colours we always leave a small space between bars (unless the data is continuous). To help with legends we always have them in the same orientation and order as the bars.

Due to the issues with use of colour, this type of chart should only be used when essential and the plain text alternative is very important.

Think: do you really need all the clusters? Can you simplify the chart?

Slide 17

This slide shows a clustered bar chart using our categorical colour palette. But this time each bar has a different pattern to aid matching the series label to the bar.

It meets the success criterion for adjacent colours and use of colour but may be seen as a fail for sensory characteristics criterion as shape is used to match series labels to bars. However, providing information using shape is an effective method for many users so failing this criterion should not discourage use of patterns completely, as long as the information is provided in other ways (for example, a plain text alternative).

Even so, patterns are also problematic because they can make charts looks cluttered when overused. They can also sometimes suggest data is incomplete, provisional or forecasted.

Therefore, using patterns is not a perfect answer, but in some circumstances they can be useful. For example, using a pattern for one bar alongside a bar with a solid colour.

Slide 18

This slide shows the clustered bar chart as four small bar charts. These are called “small multiples”.

This meets the success criterion for adjacent colours, use of colour and sensory characteristics.

So these are a good solution, but they can be hard to make and take up a lot of room in a release. They may also appear very small on a webpage and hard to scroll through on a mobile device.

We advise to test how they look and how people interact with them.

Slide 19

This slide shows the same clustered bar chart, but this time using our focus chart palette to draw attention to one series.

It is debatable if this meets the adjacent colours success criterion because the grey does not have enough colour contrast with a white background. It depends whether the light grey bars are essential or just useful context. If they are essential then the charts fails this criterion.

The use of colour success criterion is not technically met as you do still have to match one series label to the coloured bar. You could help meet this criterion by having text stating “The first bar of each cluster shows apples” within the chart image – if there is space.

So this can be a useful approach, when suitable for your data, but the plain text alternative is still very important.

Slide 20

This slide shows a stacked bar chart using our categorical colour palette.

It meets the success criterion for adjacent colours but not for use of colour as a legend is used.

As with clustered bars, this type of chart should only be used when essential and the plain text alternative is very important.

We should also help by making sure the legend is the same orientation and order as the stacks in the bars.

Remember: whenever we use stacked and clustered bar charts we should consider if they are the correct type of chart to use.

Think: do you need all the stacks or clusters? Would it be more impactful to just show one series?

Slide 21

This slide shows a stacked bar chart where negative values are involved.

This fails the use of colour success criterion and the adjacent colours success criterion because when you have negative values the series in the stacks move around. This means adjacent colours do not always have the required level of contrast.

So stacked bar charts with negative values should be avoided as they fail both the main colour success criterion. If they are used the plain text alternative is even more important.

Slide 22

This slide shows a small multiples alternative for the stacked bar chart with negative values.

Each small bar chart shows one series. This passes both the adjacent colours and use of colour success criterion.

So this a good alternative for stacked bar charts with negative values. But, as mentioned, small multiples can be hard to make and take up a lot of room in a release. They may also appear very small on a webpage.

Slide 23

This slide shows a line chart with two series, one for men and one for women. A legend is not used. The lines are labelled on the chart. The first two colours from our categorical colour palette are used: dark blue and orange.

This chart passes both the adjacent colours and use of colour success criterion.

It passes the adjacent colours criterion because these colours have enough contrast with the white background and each other.

It passes the use of colour criterion because a user could understand this chart even if they could not see the colours. This is because labels are used instead of a legend and there are only two lines which are mostly separate.

Slide 24

This slide shows a line chart with eight lines. Various colours are used. A legend is not used, lines are labelled at the end of the chart.

This fails the adjacent colours success criterion as it is not possible to have eight colours that all have the required level of colour contrast with each other. Remember – with bar charts we can usually keep colours in the same order but this is not possible with line charts.

It is debatable whether it passes the use of colour success criterion. Although a legend is not used and the lines are labelled individually, it is not always possible to follow a line through the chart as there are so many lines.

Slide 25

This slide shows the same line chart with eight lines. Only the dark blue and orange colours from our categorical colour palette are used. Dashed and dotted lines are used to tell the lines apart.

This would not pass the adjacent colours success criterion as there are so many lines at some points blue overlaps with blue and orange with orange.

It is debatable whether it passes the use of colour success criterion. Although the lines are labelled individually, it is not always possible to follow a line through the chart as there are so many lines and the dashes and dots get mixed up.

It does not pass the sensory characteristics success criterion as shape is used to tell the lines apart.

Also dashed and dotted lines are also problematic because they can suggest incomplete, provisional or forecasted data. They also make charts cluttered.

So we would advise to avoid dotted and dashed lines.

Slide 26

This slide shows the same line chart with eight lines. Only the dark blue and orange colours from our categorical colour palette are used. Data markers are used to tell the lines apart.

This would not pass the adjacent colours success criterion as there are so many lines, blue overlaps with blue and orange with orange at some points.

It does not pass the sensory characteristics success criterion as shape is used to tell the lines apart.

The data markers also make the chart cluttered. We advise to generally avoid using data markers.

Slide 27

This slide shows the line chart with eight lines as eight individual small line charts.

This again shows that small multiples may be the best accessible alternative.

This approach passes the adjacent colours and use of colour success criterion.

But as mentioned, small multiples can be hard to make and take up a lot of room in a release. They may also appear very small on a webpage.

Slide 28

This slide shows the line chart with eight lines where only the line showing the UK data is highlighted in dark blue. The rest are in a light grey. This is a focus chart alternative

It is debatable whether it passes adjacent colours success criterion. The light grey does not have enough contrast with the white background. If you feel that the essential message of the chart comes across then it can be argued to pass the adjacent colours success criterion.

It is also debatable whether this passes the use of colour success criterion as all the lines are labelled but you cannot tell the grey lines apart. If this is suitable for the message the chart is getting across then it can be argued to pass the success criterion.

You should only use this approach when essential and be aware that the plain text alternative becomes very important.

Slide 29

This slide shows two pie charts. One with four segments and one with three. They both use our categorical data colour palette. A legend is not used, instead the segments have labels next to them.

The pie chart with four segments meets the adjacent colours and the use of colour success criterion.

The pie chart with three segments meets the use of colour success criterion (as a legend is not used). If all segments have a bold white border and the pie chart is big enough it can also be argued to meet the adjacent colours success criterion.

In general however pie charts should only be used in specific circumstances, see our charts guidance on the Analysis Function website for more information.

They also pose other problems for accessibility because they are hard to understand when magnified.

Slide 30

This slide sums up the section on colour.

If your chart fails some of the colour related success criterion you should think about the message and think about simplifying your chart.

Think: Do you need the clusters and stacks?

If you do need all the information – consider alternative like small multiples or limited use of patterns on bars.

Note: generally we say to always avoided dotted and dashed lines because the chance of misinterpreting a dashed or dotted line as incomplete, provisional or forecasted data is greater than with a patterned bar.

Avoid legends whenever possible, if the have to be used, put them in the same order and orientation as the stacks or clusters and state this within the chart if you have room.

Write descriptive text alternatives.

Slide 31

Alternative text

Slide 32

Another accessibility success criterion to consider:

Non-text content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Slide 33

This slide shows the functionality some websites have which allows a used toggle between a bar chart and a table.

This is a good plain text alternative in some circumstances.

But:

the toggle functionality must be accessible
the table must be marked up properly
the table cannot be too long

Think: can you visualise the chart if someone read you the table?

Slide 34

This slide is the same as slide 10.

Slide 10 content:

This slide shows how a chart may be displayed in a statistical report, but this time the alternative text is what may come out when a chart is embedded in the HTML code of the page. This slide is meant to give experience of what reading a statistical report may be like for a screen reader user.

The text on the slide reads:

Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year
Overseas residents’ visits to the UK by month, January 2018 to May 2022
Clickable link all visits thousands, Clickable link North America thousands clickable link Europe thousands clickable link other countries thousands. May 22 Dec 21 July 21 Feb 21 Sept 20 Apr 20 Nov 19 Jun 19 Jan 19 Aug 18 Mar 18. Zero comma zero zero zero comma one zero zero zero comma two zero zero zero comma three zero zero zero comma four zero zero zero comma five (this is the alternative text)
Source: Office for National Statistics – International Passenger Survey
Download this chart
Three buttons showing “Image”, “CSV” and “XLS”

This is meant to show that we have slightly more information from this alternative text, but it is hard to understand. We are still unable to understand the data.

Slide 35

This slide shows the same as the previous but now the text alternative has been rewritten to be more descriptive.

The content on this slide reads:

Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year
Overseas residents’ visits to the UK by month, January 2018 to May 2022
Visits to the UK by overseas residents fell sharply to very low levels in April 2020 due to the coronavirus pandemic. Visits from residents of North America have remained low since that time but have started to increase in recent months, standing at 420,000 visits in May 2022. Visits from European residents rose slightly towards the end of 2020 before falling back. In July 2021 they started rising again. In May 2022, there were 2,000,000 visits, almost equal to pre-pandemic levels. (this is the alternative text)
Source: Office for National Statistics – International Passenger Survey
Download this chart
Three buttons showing “Image”, “CSV” and “XLS”

The real chart is shown as an image on this slide as well.

This slide is meant to show that a descriptive text alternative gives us a much better understanding of the data.

Slide 36

This slide shows the content from the previous slide, but now the descriptive alternative text is placed between the image of the chart and the source information within the body text of the page.

This is the best practice structure for charts in reports.

Descriptive alternative text should sit within the body text of the page – not in the code behind the image as not everyone can access it there – remember it is not only screen reader users who want alternative text.

Ideally the descriptive alternative text should sit directly underneath the chart, before any information on source or data downloads. This makes it clear that the text is linked to the chart.

Charts themselves should be hidden from screen reader software so the software reads out the chart title and then the chart description with nothing in between.

The only exception to this is if your chart image links to a media file which shows the chart as a larger version. This can be helpful for people with low vision. In this case the alternative text behind the chart (in the code) should say something like “Larger version of [insert chart title]”.

Slide 37

This slide shows a chart exercise.

The content on this slide reads:

School most commonly stated childcare arrangement that helps mothers work (this is the headline title of a chart – sometimes argued to be appropriate alternative text as it gives the main message of the chart)

Figure 1: Percentage of mothers of children aged 0 to 14 in paid work who stated the listed childcare arrangement helped them go to work, England, 2021 (this is the statistical subtitle of the chart)

Then there is an image of a bar chart and a box with a telephone logo and the text “How would you describe this chart over the phone?”

People are invited to try and write descriptive alternative text for the chart.

Then they are shown suggested descriptive alternative text which reads:

Suggested alternative text:

The most commonly stated childcare arrangement that helped mothers go to work was children being at school (44% stated this). Having reliable childcare or relatives to help were also popular (42% and 38% respectively). Using hours from the 30 hours free childcare scheme was stated by 8%, while 4% stated using the 15 free hours scheme. The least common arrangement was employer pays for some or all childcare (1%).

This slide is meant to show that the headline title with the main message of the chart does not necessarily give an “equivalent experience” to a disabled person. More detail is often needed.

Slide 38

This slide shows another chart exercise.

This slide shows a line chart with one series and annotation.

The title of the chart is: Number of live births each year, England and Wales, 1901 to 2018

There is a box underneath the chart with a phone icon and the text: “How would you describe this chart over the phone?”

People are invited to try and write descriptive alternative text for the chart.

Then they are shown suggested descriptive alternative text which reads:

Suggested alternative text

In 1901 there were around 1.1 million live births in England and Wales. There was a fall to 800,000 during World War 1 followed by an increase to over 1.1 million when the war ended. Live births were lower (around 700,000 a year) during the 1930s downturn and World War 2. There were peaks in live births after World War 2 and during the 1960s baby boom. Both were just above 1 million. Live births fell to under 700,000 a year in the early 2000s. The increase in the mid 2000s (to around 800,000 a year) is explained by increases in immigration.

This slide provides an extra exercise in writing descriptive alternative text which incorporates annotation.

Slide 39

This slide provides a summary of the alternative text section.

Text alternatives are very important for accessibility.

The text alternative can be a table in some situations but not all

The text alternative should be descriptive but think about how you would describe the chart over the phone – you would not describe every single point, you would give an overview

When provided in the body text (which we advise) the text alternative is not limited to a specific number of characters.

Lots of people may need a text alternative so it should be provided in the body text, directly underneath the chart and not in the code behind the chart.

Slide 40

Publishing charts

Slide 41

Final accessibility success criterion for this presentation:

Images of text: text is used to convey information rather than images of text, except if the image is customisable or essential

This is relevant for where we place titles and source information. Previous guidance used to state that titles and source information should be within the image of a chart. Now we say this information should be in the body text of a page as text within an image is often hard to read and cannot be read by screen reader software.

Slide 42

This slide shows an best practice example of a chart published in a report.

The headline title is: Can I have some more? Oliver stays on top of baby names list

The statistical subtitle is: Figure 1: Number of baby boys given the top 10 most popular names, England 2020

Both these should be in the body text of the page.

Next comes the image of the chart.

The image of the chart should be in SVG format. This allows users to zoom in without the image looking blurry. The chart image should be marked as decorative so that screen reader software ignores it – unless it links to a larger media file (as explained previously).

The descriptive alternative text follows directly after the image of the chart within the body text of the page.

In this case the descriptive alternative text reads:

This bar chart shows Oliver is the most popular name given to baby boys in England in 2020. A total of 4,017 boys were named Oliver, followed closely by George, Arthur, Noah and Muhammad which were all given to over 3,500 babies. The next most popular were Leo, Oscar and Harry (all given to over 3,000). Archie and Henry completed the top 10 (both given to over 2,500).

Next comes the source information, data download and notes – all also in the body text of the page. In this case the source information reads:

Source: Office for National Statistics – Baby names for boys in England and Wales 2020 edition

The link to download the data reads:

Download the data for Figure 1 (ODS, 2.4KB)

Note that this has specific link text, not just “Download the data”. It also has file type and size. The data download should be in an accessible format.

Finally the notes. These should only be included when necessary and should be succinct as possible. In this case the notes read:

Notes:

Ranking uses exact spellings. Similar names with different spellings are counted separately.

Slide 43

Other formatting

This is the final section of the presentation. It discusses some other formatting tips to make charts more accessible.

Slide 44

Simplicity

This slide invites users to choose which is better:

the line chart on the left with text boxes, perpendicular text, data markers on the lines, a legend and a grey background
the line chart on the right which has a white background, lines which use the blue and orange colours from our categorical colour palette, no data markers, no legend (lines labelled on the chart) and no perpendicular text

The chart on the right is better for accessibility. The message is to keep charts as simple as possible and never use perpendicular text.

Slide 45

Wonky text

This slide shows two versions of the same bar chart showing levels for the areas of England. One has bar labels along the x axis written at an angle the other has the bar labels written on the y axis, not at an angle.

The message is: never use wonky text. Text at an angle is hard to read.

Slide 46

Gridlines

This slide shows two versions of the same line chart. One has eight gridlines in a light grey colour. The other has 16 gridlines in a dark grey colour.

The message is: do not use too many gridlines and keep them a light grey colour. The light grey may fail contrast ratio requirements as it does not have enough contrast with the white background, but in this case it is OK as the gridlines are not necessary, just useful. Also dark gridlines actually make it harder to see the data.

Slide 47

Value labels

This slide shows the same bar chart three times.

One has no value labels on the bars
One has value labels at the end of the bars
One has value labels at the base of the bars when they fit and at the end of the bars when the bars are too short

These three bar charts were tweeted by the Head of Data Visualisation at Office for National Statistics. He asked which users prefer. Most preferred value labels on the end of the bars. This went against traditional thinking which is that value labels are easier to read and compare when they are aligned correctly on the base of the bars.

This shows that testing is always useful as it may contradict what you think.

If you use value labels you have to think about the colour contrast of text against the background and the size of the text to ensure they are accessible. Also, if people really need value labels you should think about providing a data table instead of a bar chart.

Slide 48

This slide is an empathy recap

Going back to our empathy slides at the start:

The user with colourblindness – we have talked a lot about colour and how to fix the issues.

The user with low vision – we advise to use SVG images of charts to retain clarity and link to larger versions when appropriate.

The user who does not understand charts or who cannot see charts at all – the text alternative is very important to all sorts of users.

Slide 49

Testing

You should test your charts to make sure they are understood and that they work with accessibility software.

You can test your charts by:

tweeting – ask people what they think or set up Twitter polls
using the Basecamps we have set up (more details on our support page)
asking colleagues
speaking to your departmental presentation and web dissemination champions
downloading and testing with screen reader software
joining the cross-government accessibility community of practice