Author: Piccia Neri
It’s not that hard to create an accessible pie chart, when you know what to bear in mind. Here is a summary of the thought process and design choices we made:
- Choosing the right type of chart – Making sure that we pick the best visual representation for the data, considering ease of comprehension. A pie chart is ideal when displaying proportions that sum up to 100%, as it provides an immediate understanding of the data distribution. However, it may not work as well when you have more complex sets of data, or too many slices of the pie. In that case, you may have to consider a bar chart with coordinates.
- Designing in grayscale first – Starting with grayscale helps to make sure that the chart remains readable without relying solely on colour. This approach benefits users with colour vision deficiencies and supports high contrast adjustments. It is also in compliance with Success Criterion 1.4.1 Use of Color.
- Avoiding reliance on colour alone – Along those same lines, and in compliance with the same Success Criterion 1.4.1 Use of Color, to make the chart accessible to users with colour blindness, patterns were added to some segments to create visual differentiation beyond colour. Patterns are very useful as an alternative to colour: but please, be careful with them. Adding too many patterns, or creating patterns that are too complex or too detailed, may cause further problems for people with low vision, and may cause further cognitive load. As with everything: use in moderation!
- Explicit labelling – Data labels were moved outside the pie chart, with clear connecting lines, reducing visual clutter and improving readability. This also makes it easier for users who struggle with distinguishing similar shades, and it makes the labels readable by assistive technology.
- Adding a keyline for segment separation – Introducing a white keyline between segments improves contrast and clarity, reducing eye strain.
- Improving readability of small data points – Small segments were handled carefully to avoid overcrowding and improve legibility, preventing information from becoming too condensed.
- Logical positioning of the legend – The legend was repositioned for better alignment with the chart, reducing cognitive load when cross-referencing data.
- Providing a full textual description – A complete text-based description was added, ensuring that screen reader users can understand the chart without relying on visual elements. This is an essential part of an accessible chart! And the one that Visua11y can best help you with.
- Including alt text for images – Alt text is essential in order to make sure that assistive technology users receive a meaningful summary of the pie chart without missing crucial information. But it’s not just for screen readers: any user will find it helpful, when you add a description of what a chart does, which information it shows, and which story it tells.
By applying these accessibility best practices, this pie chart becomes a much more inclusive data visualisation, making statistical information easier to understand for a broader audience – not just disabled users.
As usual: accessibility is an opportunity to improve user experience for everyone. Make the most of it!