Analysis in Government month 2022: Data vis and accessibility – links to content and answers to questions

If you came to my session this morning  (19 May 2022) on data visualisation and accessibility, thank you, I hoped you enjoyed and found it informative.

Links to content

I realised that I talked a lot about content that lives on this website. I always find it hard to link to content while delivering a presentation but then I remembered I made this landing page for guidance, training and support related to communication of statistics and analysis!

A link to the recording and the slides will be added to this landing page as soon as we have got them sorted.

Questions and answers

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.