Data Visualisation and Accessibility – material, links and answers to questions from Analysis in Government Month 2022 session

Recording

Back to top of page

Slides

Slides from the presentation (PPTX, 47MB) – this file is not accessible, a plain text version of slide content is on this page.

Back to top of page

Links

Guidance and support

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

Chart clinics

These clinics will be run on a drop-in basis. You are welcome to come with your charts to discuss accessibility and best practice issues. They will be held on the last Tuesday of each month at 10am via Microsoft Teams. They will be advertised on the events page.

Accessibility clinics

You can come to these with any questions about how to make information accessible when publishing statistics or analysis. They will be held on the last Wednesday of each month at 10am via Microsoft Teams. They will be advertised on the events page.

Other links

Colour contrast checker from WebAIM

Back to top of page

Question and answer (Q&A) session

Here are the questions from the session’s chat, with my answers.

How do you find the colour code to put into the contrast checker?

I think this was answered in the chat, but in case you missed it you do something similar to this:

Select the element you want, go to ‘Format’ in the ribbon, select ‘Shape fill’ and then ‘More fill colours’. The box that comes up should display the hex code and the Red Green Blue (RGB) code. If you only get the RGB codes (which may be the case on older Microsoft programs) you can use an online colour code converter to get the hex code that the contrast checker needs.

Do purely decorative images also need an alt-text?

I think there was also some feedback on this in the chat, so thank you to whoever provided that!

If you want to mark an image as decorative it needs no descriptive alt text. To mark an image as decorative you may need to put two double quotation marks (“”) in the alt text field, it depends what website you are publishing on.

Is there any plan for the Analysis Function to create a palette of colours and different tint, tones and shades?

The short answer to this is no. We have no plans to expand on our colours guidance at the moment.

I put ‘Figure 1’ in front of the headline title, not the stats title, to indicate that the headline title describes the figure. I wonder if there are any issues with that approach?

It does not matter where the ‘Figure n’ goes. But it is useful to have in front of one of the titles. My preference is for in front of the statistical title as this comes just before the image of the chart.

Would the headline title and statistical title be marked up in HTML as a header – maybe level 2 and level 3? or would they be styled as bold instead?

They definitely need to be marked up as the appropriate heading level. H1 for page title, H2 for first level subheadings, H3 for second level subheadings and so on.

Does GOV.UK support SVG images? I was told no.

Yes GOV.UK does support SVG images and the Government Digital Service (GDS) recommend them.

Here are some examples of charts and tables on GOV.UK where I have uploaded an SVG image.

The axis label text is very small. Is there a minimum it should be?

I am not 100% sure which chart you were talking about when you commented this, it may have looked small as I used screenshots on the slides.

It is tricky to recommend a size as it all depends on how you build the chart. For example, if I build a chart on PowerPoint and I make the slide size very big I can make all the fonts very big. But, when I save it and upload on the website the font will not look the same size. I find it is a bit of trial and error and something that can only be judged by looking at the chart on the webpage.

You should definitely try and stick to a minimum of 12 when creating your chart though I think.

Could you use a table if the chart is harder to interpret?

I think this question is about the text alternative that “serves the equivalent purpose” to the chart.

This depends on what you decide will provide the “equivalent purpose”. If you think a non-disabled person would look at a chart and take away a message, the text alternative should be that message. If you think they would read values off the chart, the text alternative should be a properly marked up table of data or an accessible data download.

For alt text behind the image – should this just be left blank then, or say something like “image description in body text below”? Leaving blank might not be clear to users whether it’s intentionally blank or just [not filled] in.

Generally if you leave the alt text field blank the image will automatically be marked as decorative and screen reader software will skip over it. However, on some websites you might need to put two quotation marks (“”) in the alt text field for it to be marked as decorative.

I would not put “image description in body text below”. This will likely cause unnecessary auditory clutter.

Is accessible data always in [Open Document Spreadsheet (ODS)] format?

No, you can make an accessible data download in the Excel format, but open formats such as ODS are preferable.

But, it is difficult to make a CSV format accessible, for reasons discussed in my guidance on ‘Releasing statistics in spreadsheets’.

If this is the first publication of the chart do you just skip the source entirely or link to the current document?

Generally you should link to the data source. This could be the webpage where the spreadsheet lives the homepage for the survey the data was taken from or some sort of online statistics repository.

Where is it best to put the footnotes in relation to the chart description?

Good question. I would say, in terms of accessibility it is better to have headline title, statistical title, image of chart, alternative text, source information, data download link and then footnotes.

I can see why this might look a bit odd though.

The problem is, when I have tested a chart with a screen reader user, we looked at one that had the title, the chart image and then the footnotes. When the screen reader software went straight from statistical title to footnotes it was really confusing for the user, because obviously they had not been told what the message of the chart was.

I wonder if you would be open to giving feedback on the accessibility of individual reports, and specifically chart accessibility where there are different options for meeting [the Web Content Accessibility Guidelines]?

I can do this via the accessibility clinics I run on the last Wednesday of each month. These are advertised on this website, under event type ‘Clinic’.

Should we be using these categorical colours for [Red Amber Green] rating bar charts [for example] pink for red – worse than, orange for similar to and turquoise for green better than?

If you can contact me about these charts I would be happy to have a look at them! I am not 100% sure what they are sorry.

What other colours may we use for charts with more then four categories?

The guidance is do not use charts with more than four colours. Think of a different way to present the data.

If you have to, follow the advice at the end of the colours guidance on selecting your own colour palette. Remember the important thing about colour contrast is that adjacent colours should have at least a 3 to 1 colour contrast ratio.

Can you define the contrast ratio please? How is it calculated?

Aha! I do not know sorry! I just use the online colour contrast checker!

For your simplicity chart – is it not preferable to have the labels the same colour as the lines

You can use coloured text as long as the colour contrast between the text and the background is 4.5 to 1 or higher.

But, in general black or dark grey on white is your best option. It will not work for everyone, but it is your best option.  We advise to only use coloured text on charts when you have to, for example when lines are very close together.

I understand someone was working on a gov style package for ggplot2 a few years ago, is anyone still looking at that. particularly with this new guidance?

Another user replied to this: the R package {govstyle} has been archived and will no longer be updated.

I am not 100% sure what this was but I do not think anything is being worked on sorry no.

For blues you have a three shade scale, do you have a similar thing for orange, turquoise and magenta?

No sorry. You can take a look at the section at the end of the colours guidance and create your own three shade scale based on other colours if you need to.

If we [should not] use colour by itself to differentiate different lines on a line chart, is there any advice on what style of alternative line formatting, for example, dots, dashes, dot-dash and what has the best contrast?

The main issue with using colour to differentiate is using a legend. This is because legends make a user match a label to a chart element using colour alone.

This is not so problematic with line charts as you can label lines directly. You can use coloured text if the lines are very close together, as long as the colour you use has a 4.5 to 1 colour contrast ratio with the background colour.

I would not recommend using different line textures as they can make charts look very cluttered.

What would you do in the case when the end points have the same value? Put the labels more in the middle of the chart?

I think you are referring to labelling the lines on a line chart here. Yes, if you cannot put the labels at the end of the chart, use the space in the middle of the chart.

On interactive charts you can switch lines off, is this acceptable?

This is one of the extra things that would need testing with interactive charts. I do not know enough about them to give a proper answer to this sorry.

Do you recommend the use of a particular tool for data visualisation please?

I use Excel and PowerPoint. I find I can do everything I need with them fairly easily.

Although I do see the benefits of using a program like R if you are putting out large statistical reports with many charts.

Is Power BI reports accessible on the browser? Is there any guidance online on how to make it accessible? 

I am no expert on Power BI but everything I have heard about it suggests it is not possible to make PowerBi products fully accessible.

It may be going through improvements though. If you join the Basecamp for Accessibility for Statistics and Analysis you might find people to share knowledge with. Or you could try the cross-government accessibility community of practice.

Have you got any advice for making hover over features on interactive charts accessible?

No sorry I do not know enough about interactive charts to give advice on their accessibility.

If you join the Basecamp for Accessibility for Statistics and Analysis you might find people to share knowledge with. Or you could try the cross-government accessibility community of practice.

Will you be updating the graph templates

I think these are quite old now. I have no plans to update any templates sorry.

Any thoughts on y-axis on the left or right? I’ve seen a lot of Google charts with the y-axis on the right?

The y-axis can go on the right or left as far as I am aware, I do not think it makes much difference. But, consistency does make things easier to understand so, in general I would put the y-axis on the left unless there was a really good reason to have it on the right.

Is there any good accessibility guidance on making accessible interactive (HTML) charts (for example with tools such as R and/or highcharts)? The tools [do not] matter so much, just guidance on the HTML result would be very helpful!

I do not know of anything sorry.

If you join the Basecamp for Accessibility for Statistics and Analysis you might find people to share knowledge with. Or you could try the cross-government accessibility community of practice.

Do you recommend any specific programmes for assessing accessibility?

Newer versions of Microsoft Office programs all have accessibility checkers installed if you have not tried them already. They are a bit like a spelling and grammar check though, they will not pick up on everything.

I also like the wave extension on the Google Chrome browser, but this checks webpages so would not be much use for checking charts, it would just see charts as images.

Your best bet is to understand the accessibility success criterion as best you can, and, if possible do some user testing with disabled users. That is the most enlightening thing you can do and I think you would learn loads from it.

This session seemed to very pitched to statistical release style visualisations. It would be great to have a similar session at some point focused on data [visualisation] tools used for internal communications ( for example, Tableau, PowerBi, Quicksight)

Unfortunately I do not know enough about these tools to do a session on them.

If you join the Basecamp for Accessibility for Statistics and Analysis you might find people to share knowledge with. Or you could try the cross-government accessibility community of practice.

How about geographic data in maps?

Unfortunately I do not know enough about maps and accessibility to do a session on them. You could try someone from the Government Geography Profession though.

Tony – Will accessible type size in accessibility [documents] be reviewed going forward?

Sorry, I am not sure what you are asking here. If you want to email Analysis.Function@ons.gov.uk with a bit more detail I can try and answer you that way.

Back to top of page

Plain text version of slides

Slide 1

Data Visualisation and Accessibility, Analysis in Government Month 2022

Slide 2

Welcome

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.

Slide 5

The following accessibility success criterion impact on colours of chart elements and the use of coloured text for chart labels:

Contrast (minimum): The visual of presentation text and images of text has a contrast ratio of at least 4.5 to 1.

Non-text contrast: all adjacent colours used in graphics need at least a 3 to 1 contrast ratio. This applies unless the presentation is “essential” for communicating a message.

Slide 6

The following accessibility success criterion impact on use of chart legends:

Use of colour: colour is not used as the only visual means of conveying information.

Sensory characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, colour, size.

Slide 7

The following accessibility success criterion impact on alternative text:

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

The following accessibility success criterion impact on placement of chart titles, source information and footnotes:

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

Slide 8

What to supply with all charts:

  • Titles
  • Alternative text
  • Source
  • Data download
  • Footnotes

Slide 9

Example

  • Can I have some more? Oliver stays at the top

This is the headline title of the chart, it lives in the body text of the page.

  • Figure 1: Top 10 most popular names for baby boys, England 2020

This is the statistical heading for the chart, it also lives in the body text of the page

This is followed by an image of the chart in the SVG format. The chart is marked as decorative so it will be ignored by screen reader software.

  • 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).

This is the alternative text to the chart image. It gives the equivalent experience to looking at the chart image. It lives in the body text of the page and it immediately follows the chart image.

This is the link to the data source for the chart.

This is an accessible data download of the data used in the chart.

Slide 10

Formatting:

  • Colours
  • Simplicity
  • Labels
  • Grid lines
  • Annotations
  • Tick marks

Slide 11

This chart shows the three colour palette tables set out in the ‘Data visualisation: colours’ guidance.

Slides 12, 13, 14, 15, and 16

These slides summarise the content in the formatting section of the ‘Data visualisation: charts’ guidance.

Slide 17

Bar charts:

  • Bar vs. Pie
  • Gaps
  • Breaking y-axis
  • Time series
  • Value labels
  • Stacks and clusters

Slides 18, 19, 20, 21, 22

These slides summarise the content in the bar charts section of the ‘Data visualisation: charts’ guidance.

Slide 23

Stacks and clusters:

  • Part to whole
  • Limit on categories
  • Order
  • Negative values
  • Colour contrast
  • Gaps
  • Legends

Slide 24

Line charts:

  • Colours
  • Labelling
  • Max of four
  • Alternative approaches
  • Breaking the y axis
  • Context

Slide 25, 26, 27, 28, 29 and 30

These slides summarise the content in the line charts section of the ‘Data visualisation: charts’ guidance.

Slide 31

Pie charts

  • When to use
  • Colours
  • Order
  • Labels

Slide 32

Testing:

  • Tweet
  • Twitter poll
  • Basecamp
  • Colleagues
  • Champions

Slide 33

Demo 1

Slides 34, 35, 36, 37, 38, 39, 40, 41 and 42

These slides summarise Example 1 on the ‘Data visualisation: examples’ guidance.

Slide 43

Demo 2

Slides 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55 and 56

These slides summarise Example 2 on the ‘Data visualisation: examples’ guidance.

Slide 57

Thank you

@statshan

Back to top of page
  • If you would like us to get in touch with you then please leave your contact details or email Analysis.Function@ons.gov.uk directly.
  • This field is for validation purposes and should be left unchanged.