Designing accessible data

January 2024
3 minutes
Accessible design
Accessible data graph with various shapes and labels so that screen readers can describe it.

Data visualisation (or dataviz) is everywhere in our digital products: web page, banking app, PowerPoint presentations, etc. Huge volumes of data are transcribed into graphs all the time, but are they accessible? Hardly ever. But it's not as hard as it seems. In reality, a lot depends on the tools you use.

For example, Microsoft Office lets you check the accessibility level of everything you create. Email, text document, PowerPoint presentation, note or even spreadsheet, you can easily produce accessible documents before sharing them.

Here are a couple of things you still need to take in consideration, regardless of the tools you use.

Describe your graphs

To make sure anyone can understand your graphs, describe them. Start by summarising the main idea in an alt-text for people using screen readers. And actually anyone, in case the image hasn't loaded. For example:

This week, sales improved, particularly on Thursday.

Then, you can give more details next to your graph for everyone – especially if it's too long for an alt-text:

We saw a 20% sales increase this week, 12% on Thursday only. Sales reached £12k on that day, and £50k for the whole week.

When you make time to describe your graphs in writing, you give everyone the opportunity to come back to your documents later on. Whether they're using screen readers or are simply less experienced in reading dataviz than you are.

Don't rely on colour only to differentiate data

Colours are often used in graphs to distinguish two types of data. But not everyone can see colours. Colour blindness affects 1 in 12 men and 1 in 200 women. So instead of colours, you can differentiate your data types with shapes or patterns. Or by adding labels directly to your graphs. You can of course still use colours, but what matters is that they're not the only indicator.

Pay attention to colour contrast

Presentations can be hard to make when you're not a trained designer. The most common mistake is using two colours with insufficient contrast. Generally, avoid light colours on white, dark colours on black as well as green on red and vice versa. When in doubt, you can use ABC Use All Five to check your colour combinations. Or, if your company already has defined style guides, it's best to stick with them to avoid any mishaps.

Data visualisation accessibility with Sarah Fossheim

In this podcast episode, developer and UX researcher Sarah Fossheim shares her expertise on accessible design for data visualisation projects. She talks about how to make charts and visual representations more accessible, and how to get started with accessible design.