Data Visualisations for Everyone: a talk on how to make your charts and infographics accessible to everyone. Presented by Piccia Neri at Page Builder Summit on Friday 16 May 2025.
Want the slides? You can get them here:
Transcript of the talk
Page Builder Summit friends. My name is Piccia Neri and I am a UX and UI designer focusing on accessibility. And today I want to talk to you about how to make data visualisations that are accessible to everyone.
This is a bit of an odd topic for me because as I like to say often, I am a recovering creative and I’ve always been challenged with numbers. But I started working with data visualisations because I was training a client, helping them make their content more accessible and they were relying on data visualisations a lot. So many of them were not accessible or understandable, so I got really interested in the topic and actually ended up finding it a lot of fun believe it or not. Who knew?
Are you interested in accessible data visualisations? You can learn more in my Get It Seen: Accessible Data Visualisations masterclass.
Contents of the presentation
Contents of this presentation: First of all, why it matters; Classification, an overview of classification because we can’t get into a lot of detail but classification is very important when we go and choose the right chart because choosing the right chart is fundamental so that we can make the data understandable.
Then we look at what makes charts accessible; and then I give you a few guidelines that will help you a lot. Then come the resources as well as the gifts for you and in the end a list of relevant WCAG, which stands for web content accessibility guidelines, success criteria for you to be compliant.
Why data visualisations matter
Why does it matter? It matters because data is literally everywhere. Most of the apps we use on a daily basis display some form of data visualisation. I use the fitness app on my Mac and it has a, It lets me set how many calories I want to burn in a day. I set it quite high. What do I get from this at a first glance? I can see there’s a hole that needs to be completed and there’s a timeline with spikes on it. So this is what this visualisation tells me; then when I go into the data, I understand more of the story.
There’s another part of this app that tells me how much I’ve used my mindfulness app. For the fitness I have stopped tracking my fitness activities, and I am so much more relaxed and I enjoy them so much more. Then there’s a final screen that gives me a number of charts with the various activities and I’m using Apple because they know how to do simplicity, don’t they?
I don’t necessarily like Apple as a company that much anymore. But they are very good when it comes to making things as easy to understand as possible. Because a good data visualisation should really be language agnostic: by that, I mean that it should be vaguely understandable, even when it’s in a language we don’t speak.
Because what happens often is that we can have beautiful or actually ugly charts that are unreadable because they’re hard to understand, they’re badly formatted, they’re badly designed, in a word: they are unusable.
For instance, can you tell me what the takeaway is here? What does this chart try and tell me? What is the story? It’s a visualisation of the data about the average age at which young people leave the parental household in Europe in 2022. There’s a spelling mistake.
The age ranges are from below to 23 to over 31. There are 1, 2, 3, 4, 5, 6 Stops, 6, but basically they’ve used a bubble chart to show the relationships between these data. But because they are very close values, it ends up being a collection of dots that appear to be more or less the same size. Also, they’ve decided to use colour combinations that are really not accessible such as white type on yellow. Please do not do that. It is not cool.
So I look at this chart. I see all these dots, more or less the same size in different colours for no apparent… the colours do have a reason: they are colour coded to age range. So 25 to 27 for instance is yellow. But it doesn’t really tell me any kind of story, any take away, any interpretation that tells me a story. So I’m not really sure what they want where they wanted to go with that. Here’s another chart where I can’t really tell what the takeaway is.
It’s a chart about annual household income in a certain area. It starts from more than 220,000 a year 17%; a number of ranges down to less than 20k; and it’s two sets of numerical data, more than that, which is their salary range and the percentage on the same line, and one next to the other, which confuses me already – followed by a horizontal bar. And once again, I’m really not sure what the story here is. What am I supposed to take away with this? Is it a comparison between the values? I do not get this chart very easily at first sight either. And this is to show that really we can skew the narration with how we represent data.
It really matters not only to make it understood, but to make sure that there’s a story that we tell and the take away for it. This is essential. In order to do that correctly, we need to look at the classification of charts. The first category that we look at which influences our choices is the complexity: and by that, how many data dimensions there are in a visualisation.
Going back to an Apple chart: steps count and distance charts in the fitness app. So the first chart is the steps. It shows me first of all the step count at the top: really clear to see in the y axis. And then on the x axis, I have the time of day at which I have done my activity. The distance chart below also has two data dimensions: the distance first of all very clear at the top, so I can, that’s my main take away; and then in the y axis. While the time of day where I’ve done the distance is on the x axis.
And they could have crammed both things in the same chart, but they decided not to even though it would have been three data dimensions: state count this distance and time of day So let’s learn from Apple this the app that shows me how much screen time I have spent and it has the data dimension for the amount of time again. That’s the main takeaway. So it shows at the top: I have the type of app which is in the stacked bar.
And then I have the day of the week and that’s on the x axis. Below, I have another chart which has a similar set of data because it’s still showing me the amount of time again on the y axis. And it’s showing me the type of app. Again, it’s colour coded. And then it shows me the time in the day rather than the day of the week when I’ve done it. Once again, it’s only three data dimensions, but I’ve chosen to split it into two apps because the number of data dimensions really should determine the choice of type of chart. Or also, how many charts you should really build.
Type of visualisations
There are two main very broad categories and the first question: is it an infographic or is it a data visualisation?
Sometimes it’s used interchangeably, but really even though an infographic is a data visualisation, a data visualisation is not an infographic, because an infographic is slightly different. An infographic is custom-drawn, which means it’s specific to the data. You can’t use it as a template for another set of data. It has strong visual content because often it’s almost artistic; and it’s relatively data poor.
This is an infographic from the Guardian newspaper and I really apologise that I couldn’t find a better image than this. It’s a bit blurry. It’s cities and urban areas in 2020. It shows data about the 200 largest cities, with very clear illustrations that explain the data but also that simply engage visually and give delight and pleasure to the eye.
The Guardian newspaper are, or were, absolute masters. They even used to hold workshops on how to create infographics, because there’s a real art to it. This is another infographic from a children’s book on animals, and it’s about super swimmers: the animals that live in the water but then don’t have gills, because they are either mammals or reptiles; and how long they can hold their breath for.
This uses illustrations and it looks like each animal is in a swimming pool lane. So it’s quite clever, really nice, really cool, lovely colours, look, yellow and blue; and you can clearly tell at a glance which is the animal that can hold their breath for longer. Interestingly, they’ve put a human between the walrus at 10 minutes and the northern elephant seal at 30 minutes: which is an interesting choice to make, because even though it is absolutely true that – actually, the longest record for breath holding for a human is currently at 24 minutes – still, this is wrong, because the human is represented while swimming. There is no way that a human can hold their breath for that long while swimming. You can do a long breath hold, but you won’t be moving.
Okay. Sorry I’m a free diver, so I know about these things. Anyway, clearly, you can’t reuse this for a different set of data, you’d have to redraw it.
It’s very specific. It is a lovely way to communicate data though, and a real sort of art form; whereas data visualisation is algorithmically drawn: it’s not specific to the data, so you can use a template as many times as necessary. It has usually poor visual content, and it can be relatively data rich, although an infographic may use many data visualisations in it.
In fact, this is a pie chart that visualises data that compose a whole – and by the way, this is the visualisation of the chart that I showed you earlier that I couldn’t really quite understand, because I realised that I didn’t think it was a comparison. I actually thought that it was showing the composition. Then, you have the hybrid type of visualisation. This is again from the Guardian newspaper and it’s a page that uses both data visualisation simple charts, and more visual infographics. We need to know how to choose the right chart.
I’m gonna give you a mini framework for that. First of all ask yourself: what’s the story that the data is telling? The second question is: what do we want people to understand?
Because don’t forget that, based on the second question, you may even want to skew the visualisation – not necessarily to trick people, but to highlight a certain aspect of the story that the data is telling, and what format best supports that. In order to be able to use this mini framework, we need to have a quick look at data relationships types.
We don’t have time to go deeply into this, but just to give you an idea. First of all: we got comparison data relationship types; then we have composition, that we just saw earlier with a pie chart; distribution, which looks at how data are distributed within certain ranges; then change over time, which usually shows trends; and then relationship, which shows the relationship between sets of data, which is the largest which is the smallest and so on.
Let’s consider this scenario: the devices used to access a website. The data that we have is mobile 60% desktop 30% and Tablet 10%. Does a bar chart work for this? We could say that a bar chart works for this, because it’s easy to compare category sizes at a glance.
So it would look like this: three vertical bars. The y-axis goes up to 60%; the x-axis has the categories. So mobile is the tallest at 60%, then desktop is 30%. And I’ve just realised that bar looks way too tall to be 30% – never mind! And then tablet is 10%. So this works, but does it? Let’s think about it. Is it actually a comparison or is it part of a whole? I’m not sure that the data is actually a comparison.
I think that the data is not comparing different categories: rather, it’s showing the parts that compose a whole, adding up to a hundred percent. Normally, when it’s adding up to a hundred percent, it’s probably not a comparison. It’s probably the parts that compose the whole. And that’s comparison versus composition. So rather than this bar chart, I would do a pie chart, showing us clearly most people are mobile, then 30% are on desktop and the lowest percentage are on tablet.
To me, that’s a much clearer way of telling the story that this data wants to communicate. This is an actual comparison chart which shows the percentage of people who say that democracy in the US used to be a good example for other countries to follow, but has not been in recent years, shown by country.
So it’s a degrading horizontal bar scale, starting at 67% with Canada, and ending up in Bangladesh with 12%. It is not every country in the world. This is shown vertically. So the bar chart is horizontal, so that means there’s a long strip of countries on the page. Then a composition chart would be the percentage of public teachers in the US who say they are worried in which proportion, whether very much, not at all, somewhat, about the possibility of a shooting ever happening at their school. So this shows the parts of a whole out of all the teachers, what their different opinions are, and they form a whole.
And this is another pie chart, but there’s a caveat with pie and doughnut charts – doughnut charts are conceptually the same as pie charts. For instance, this one above: the top causes of death in national parks in the US. It has so many categories, from avalanche to vessel incident, that they are forced to use colours that will at some point necessarily overlap or be very similar even though they keep them separated. So it’s extremely confusing, if not entirely impossible, to connect in the absence of any other clearer labelling of the data.
The colour with the category I can see here 20.9% which is in a purple and I think it’s drowning but is it hyper hyperthermia for instance, which I suppose is heat stroke. And also they haven’t labelled the data in the legend either. So this is not an understandable or accessible chart. When there are too many categories like this, a pie chart is not the correct way of lay of displaying the data. I would use a bar chart probably, because the tiny segments are invisible, they have no data on it, so they’re completely irrelevant.
This is a distribution chart, which shows the number of new prostate cancer cases in the US by age, from 2003 to 2017. This is a distribution chart. It’s bars that show the age ranges from 49 to 80 in seven steps, and the number of cases in each age range. What this kind of distribution chart does is that it shows a pattern.
It’s not necessarily about comparing the data, although you could compare it, but it’s more the story that it is telling: it is the pattern, which seems to be that the cases peak in the age range between 60 to 64, and then they taper out late in later life.
Then there’s the change over time chart, which usually shows a trend. This one is the hourly forecast temperatures in Reykjavik in Iceland between 12 noon to 9 p.m. And the temperature starts low, between 1 and 2 degrees, and then it raises up and it goes down.
Then Relationships charts can be bubble charts or also scatter plot charts. The one that we’re looking at here is the number of contributors to the WordPress project by country. Now, we’re going to talk about what makes a chart accessible in a minute.
But I could already make some comments about this visualisation, which again say a lot about the designer’s choice: because here the three biggest bubbles are United States, Australia, and Spain. Australia and Spain have a very similar number of contributors, in the 700s. The United States has 1,033 but when you consider how many inhabitants a country has, perhaps there are rather much smaller countries that proportionally are providing more contributors and therefore maybe their bubble should be bigger.
There’s always choices that we can make and that end up telling a different story when we choose how we visualise the data.
Now, it’s really important to start talking about what makes charts accessible. This is contributors to WordPress 6.6. There are so many really tiny bubbles which are the contributors with only one or two or three or four or five people contributing; and that means that they are overlapping on top of one another and they are so tiny we can barely see them. So this chart is also an image therefore, how can you make it accessible?
Because if it – so in order to make it accessible you need proper alt text. But it’s going to be quite difficult to write complete alt text for this image, because it has hundreds – Look, maybe we’ll get to a hundred bubbles maybe in total. So if you can’t write a long description – so there are rules to this in the web content accessibility guidelines.
Basically, you should write the alt text, but the alt text can’t describe the whole image, it would be too much. You should have a long description, which is fine to have in another location. If you can’t have it in that same page, you could have it on a separate page.
But also what you really should provide is the raw data in a table. This would help a lot. Then this other chart is a line chart on the population unable to keep their home adequately warm in the European Union in general, as well as in individual, a number of individual member states.
Now, is this chart accessible? No, it’s not and I tell you why: because there are too many lines.
So this is from the Eurostat website, which is fabulous and you can it was my choice to choose this many countries. You can tick as many countries as you want to see in this data. But as a line chart with a timeline on the X chart and a slider that you can use to look at the data from a certain year; and then on the y-axis you’ve got the percentage of the population that is unable to keep their home warm, with the trends up and down; there’s some that go up and down.
However, the lines corresponding to each country are colour coded. And there’s a legend with the colours on the right. But first of all, the countries are not written out: their abbreviation is written. Which doesn’t mean that – you’re meant to know immediately that NL means Netherlands.
Number two, the colour coding does not help because even though the palette is actually an accessible colourblind palette, how am I to know whether the green line I’m looking at is MT – or is it? Yeah, which country is it? For instance, off the top of my head,, because I’m really rubbish with initials and acronyms, I don’t know what country is MT? I literally can’t think – I don’t know right now.
So this is not an accessible line chart – this is not accessible visually. But because Eurostat always give access to data sets, there is indeed a table version of this chart that I would be able to consult with ease if I were using a screen reader. While I’m analysing the visual aspects of these charts, a screen reader will be able to know what they’re about when they have access to the data set. Which is the case on this rather quite amazing website.
On the other hand, this is an accessible line chart because it’s showing the most common desktop screen readers. It shows adoption trends from December 2010 to September 2019 on the X-axis. And the percentage usage on the Y-axis. It shows a trend of adoption basically, and each line is colour coded, but it also uses a pattern and it is directly labelled, and there are only five lines. I don’t really think you can have more than five on a line chart. So this is how you make it accessible: it’s spelled out, there are patterns and there’s a very clear legend as well.
This is from High Charts, which is an amazing website for if you’re interested in charts. It provides a plugin and code, and ways to make your charts accessible.
Now, is this chart accessible? I’m really interested in your take on this. It’s a chart about the percentage of US online dating users who say they have ever used a certain app. The first time that I looked at it, I had absolutely no idea what it meant. I have now, I now know, but still when I look at it, I still don’t know. There’s a list of apps and then the data is shown horizontally. There’s a kind of slider on it, with numbers and colour codes. So there’s a vertical column on the right showing numbers; and at the top, the legend says “All online dating users”, which – I find that column completely incomprehensible.
However, also the title is “About one in five online daters in their 50s have used Tinder”. Which is a very limited story that they’ve chosen to tell. Because actually the age ranges are 50 to 59, 60 to 69 and 70 plus. So somehow I managed to extract the data in a table, that made it much clearer to me that these were the age ranges, and it was a percentage of how many people in each age range would have used which app. So this is a distribution table.
And when you then make it a distribution table with grouped vertical bars, now I get it, now I understand what story it is trying to tell. That’s a much clearer visualisation for me. That previous one was heinous, I just couldn’t make head or tail of it.
Back to the pie chart that we saw earlier with the teachers: the levels of worry for US teachers about the possibility of a shooting. Is it accessible or not? We can’t tell from this. We can tell that the way they’ve done the labelling I don’t agree with. Because they put it inside the pie chart laid out in a really not very comprehensible way. So here’s a web page for it where we find, when we use the WAVE tool, that this whole thing is actually an image.
Even the text and the title and majority of teachers are at least somewhat worried and so on, and the other text below – there’s lots of text here but it is all an image. So what’s the alt text for it? WAVE, the WAVE tool, which is an automated accessibility checker, sees that there is alt text.
So it thinks this is correct, that you’ve done it correctly. But the alt text simply says “a majority of teachers are at least somewhat worried about a shooting occurring at their school, this is not correct alt text for this because it only gives me a very partial view of the situation.
It’s already an interpretation of the data, but you haven’t told me the data anywhere, because there isn’t a raw data table anywhere to be found. If one of the accessibility principles is that everybody should have the same experience, everybody should have the same information available to them regardless of ability, this is not accessible because I can see this, and I have information available to me that someone who is using a screen reader will not have. So this is not an accessible table. So: proper alt text and raw data in a table please.
Because at the basis of accessibility is to never rely on one sense only, we should always provide an alternative. I usually describe things as if I were on a podcast. This is the table from before, with the data demonstrating the different income levels in Sydney’s urban territory. Then the description, the long description really tells the whole story about the data. It doesn’t rely on people seeing it. So this is how it should be done. It’s actually a little bit more complicated than this. I don’t have the time to tell you now.
But I do have the time to tell you how in my accessible visualisations course, for which you get a really nice discount [use coupon PBS30].
Now let’s get to the guidelines summary. This is a summary of guidelines. Again it can’t go into any detail in this circumstance. But it’s a really good guide to best practice for data visualisation accessibility. Number one, provide a text summary of the visualisation, making sure to describe trends or patterns.
Highcharts again: it’s a bar chart summarising the number of individuals of each penguin species from a Palmer penguins data set. Adele penguins are the most abundant species with 152 individuals; Gento with 124, and Chinstrap 68. On the actual page when you hover over their bars it tells you the data, the number.
Make the data available in an accessible table format please – always do it. Because if you have the chart then you have the table. You have the data. So do share it. Thank you.
When it’s not possible to display a table – but I would argue that it always is – please provide a full description as detailed as possible. Then label the data directly please, whenever possible. But once again, make it possible: because if you can’t do it then you probably should have two charts, not just one. Then make sure that there is sufficient contrast and separation between visual elements.
So in a pie chart you should have, as in this case from Highcharts, once again a thick enough key line between segments, so that actually the colours are distinguishable regardless. And here’s a description as well, as there should be. Then ensure the text is readable and properly laid out. I saw at least a couple of examples where the text was not readable: the bubble charts from the WordPress project.
Always use simple and plain language, which is always the case, not just with charts of course. And use simple and familiar visualisations – which the dating apps chart didn’t do, and that’s why it completely threw me and I couldn’t understand it.
Make interactions accessible to keyboard which is not always possible, there are some cases where it’s not possible, for instance in maps or some interactive charts: In which case you should provide the raw data, once again. And make sure that your accessibility statement explains that.
No unstoppable animations. It’s unusual to have charts that are animated but in case, please make them stoppable.
Then make sure that your visualisations are responsive. A lot of charts are not responsive, but they must be because responsiveness is a part of accessibility.
And then of course colour independence: do not rely on colour alone to convey information. There are alternatives. Once again, the pie chart from Highcharts uses patterns as well. You have to be careful with patterns though: they can be helpful but don’t overdo it with them, once again: because otherwise it could cause visual clutter or even issues, vision issues. Once again the line chart from before with the most common desktop screen readers, and each line having its own pattern. I talk a lot about colour and alternatives to colour in the accessible data viz course that you got a discount for and also in the colour and contrast course that you also got a discount for [use coupon code PBS30 for a 30% discount].
Now here are the resources and gifts! The cherry on the cake. So your gift with your Power Pack is the checklist for accessible data visualisations, which is a heck of a lot more detailed than the guidelines that I’ve just shared with you. It goes into much more detail and it’s very useful.
Then another gift is the 30% discount on the accessible data visualisation course which you get whether you get the power pack or not, and it will be applicable also to the colour and contrast course [use coupon code PBS30 for a 30% discount].
. Then, a great resource is the Visua11y plug-in which is not quite available yet at the time of recording this, but it will be very soon. And it won’t help you when you are about to build a data viz, which you now know how to build much more accessibly already, although you will much more after you’ve taken my course. But Visua11y is a fantastic project from CloudFest Hackathon that won the prize because it is an amazing way of taking previously inaccessible, already existing data visualisations and making them accessible with alt text and raw data tables and accessible code as well. It’s fantastic, it really is amazing. Check it out. It’s visua11y.org You get the slides at the end as well. So the links will be in there.
And then another great resource is Venngage. It’s a great tool to build any kind of chart and infographic and also slides, that has an inbuilt accessibility checker that is done superbly. And this is something else that I explain and teach how to use in the course that I mentioned already enough times.
Then at the end of the slides – that you also get as a gift – there are all the relevant web content accessibility guidelines success criteria that you need to bear in mind when you build data visualisations. I’ve been quite generous with them because there is so much to data viz, as we’ve seen: there’s text, there’s alt text, there’s content, there’s colour, there’s contrast, there’s typography – there is so much. So there’s a lot of criteria in there.
That is all from me today. It was an utter pleasure as usual. Thank you so much.