Designing accessible charts

How to design a heat map that is accessible?

At my current job as UX/UI designer for a software company, which is analysing the performance of websites, I have to deal with a huge amount of data every day.

​For me as designer this means, presenting the data in an attractive and easy to understand way.

At my company, we are setting a high focus on making our products accessible for all our users irrespective of their situation, abilities or context. This especially means, that all our visualisations and charts also have to work for low sighted, colour blind or blind users who use screen readers or their keyboard to navigate through a product.

​In the example that I would like to demonstrate here, I wanted to visualise Google Ads data, showing at which hours of a day a particular ad has been clicked the most. Through customer interviews I found out, that users are mainly interested in easily seeing the hour/day with the most clicks rather than seeing specific details to every hour.

Deciding on a chart

I decided to go with a heat map chart, because it allows to show the relationship between two variables.

The difference of a heat map to other charts is the use of different colours to indicate values by disregarding the size or shape. Typically, darker colours mean greater values and lighter colours represent lower values.

​Now, some of you might be thinking, using a chart which only distinguishes values by colour might not be the right thing to do and I would not disagree with that.

Making solutions accessible for everyone, does not mean designing different solutions for different stakeholders. It is more about inclusion and coming up with a solution which works for all users.

User requirements

Talking to different types of users provided me with a list of requirements to encounter for. The outcome influenced my decision on choosing a heat map over any other type of chart.

• User would like to be able to detect outliers right away
• It is important for users to see if activity accumulated during certain time periods
• It is not very important to see the exact number up front
• The progress over time is not important to track in this specific scenario
• Users are more interested in the highest rather than the lowest hours of a day

This being said, a heat map is a great way to show the relationship of multiple variables. In order to make it work for low sighted or colour blind people who cannot see the differences between colours in the same way, I had to tweak it.

​Here are a few things that I had to encounter for while optimising the heat map in order to make them fully accessible.

• Colours used in the heat map have to have a colour contrast of at least 3:1 to each other based on the WCAG 2.0 guidelines
• Colours have to have a colour contrast of at least 3:1 to the background
• Differences in values had to be clearly distinguishable
• It had to be very clear which value is the highest within the heat map

With those guidelines in mind I created a few different options. Each of them I tested and validated with different user types.

Challenges

Not all versions of the heat map I necessarily considered to be useable, but it was a good way to test out different options, receive feedback and it helped me re-iterate.

While working on this task, I encountered a couple of different challenges:

Colours

To make the chart work for colour blind and low sighted users, the colours need a colour contrast of minimum 3:1 to each other as well as to the background. This is a guideline for graphics and user interfaces set by the Web Content Accessibility Guideline (WCAG) organisation.

​Trying to make this work for my heat map, I realised, that our existing styleguide did not include 7 different colours which have a high enough colour contrast to each other.

I first tried to come up with a new colour scale that could be used for our charts, but it seemed almost impossible to find 7 colours from the same colour theme which are in high contrast to each other.

It turned out, using different colour scales as it is usually done in heatmap charts was not an option.

Numbers

This made it very clear, that I had to come up with a different way to distinguish values.

As the next step, I tried out numbers with a scale from 0–7 by keeping the colours in the background.

​Testing out the solution, I realised that a lot of people mistook the numbers for the amount of clicks and not as a way to rank from least to most clicks.

Symbols

I tried to find a different way to differentiate the values from each other by using symbols.

​Throughout our system, we already use symbols on line charts to distinguish different metrics.

Looking at the visualisation, it becomes very clear that the purpose of a heat map (using different scales to show relationships between values), has been disregarded entirely. It is not very straight forward to see, which hour of the day has the most clicks, unless you look for the symbol with the highest scale in the bottom key.

This is actually a very good example to see how trying to make things accessible for a certain group of users can hurt the usability for others. The symbols cause a lot of noise on the chart and also the aesthetics had to suffer from this.

The solution

The solution and outcome to the above problem, is a combination of the things I explored.

​I kept the colour scale for sighted and non colour blind users, in order to use the actual benefits of a heat map. Non filled fields present the hours of a day with no or only few clicks and the dark filled fields show hours with the most clicks. On hover (or tab for screen readers), users can view the actual amount of clicks.

Each colour has a sufficient colour contrast of 3:1 to the white background.

For colour blind or low sighted users, I added a dot shape in different sizes to the colours. Again, no dot field indicate hours with the fewest clicks and the biggest dots indicate the most clicks.

By using different shapes to also distinguish different values from each other, there was no need to make the colours in high contrast to each other.

Conclusion

Finding the right chart to visualise complex data is already a challenge in itself, but making it accessible is adding an additional layer of complexity to it. There are a lot of examples out there on how to make line charts or bar charts accessible, but I couldn’t find any documentation on how to fully make heat maps accessible.

If you really think a heat map is the best way to show case your data then I hope this case study will help you solve this issue.