The Ultimate Checklist for Accessible Data Visualisations

Making data visualisations accessible isn’t as simple as it might seem, even for experienced professionals. Ensuring that everyone, including people with disabilities, can easily understand and use your data requires more than just checking off basic accessibility guidelines. The goal is to make the data clear and meaningful for all users.

While it might take extra effort, the results are worth it. You’ll not only make your visualisations more useful for people with different needs but also improve the overall experience for everyone who views them.

In this article, we’ll introduce a checklist of key steps to help you create truly accessible and effective data visualisations. Let’s make sure your charts work for everyone, no matter how they interact with your content!

When designing charts, it’s important to have a strong contrast between different data points, as well as between text and background colours. This helps users easily distinguish between elements. 

The WCAG success criterion 1.4.3 requires that text have a contrast ratio of at least 4.5:1 against its background. So, double-check your colour choices to ensure they meet this guideline – this simple step can significantly boost readability for users with low vision. 

💻 Pro tip: Use WebAIM’s Contrast Checker to accurately calculate your text’s contrast against the background.

Using colour as the sole way to differentiate sections of your chart can create barriers for users who are colourblind or have difficulty perceiving colours. To avoid this, include additional visual indicators like textures, patterns, or borders. WCAG success criterion 1.4.1 instructs us not to rely only on colour – that’s why it’s important to think creatively about how to differentiate data.

People interact with charts differently, and some may need to zoom in or adjust the size to read the information clearly. According to WCAG success criterion 1.4.4, text should be resizable up to 200% without assistive technology, and this applies to data visualisations too. Ensure that charts don’t lose clarity or functionality when resized so they stay accessible to everyone. 

🤓 For more details on sizing text, check out The A11Y Collective’s guide on font size.

According to WCAG success criterion 1.1.1, all non-text content must include text alternatives. The WCAG forms the foundation of many accessibility laws, making it a critical consideration when designing an accessible website, including creating accessible charts and graphs.

Here are some best practices for providing useful and accessible text alternatives:

For basic visualisations, alt text can be an effective way to communicate the data. However, alt text has its limitations. It’s perfect for simple graphs, but when you’re dealing with complex data visualisations, alt text alone may not provide enough context for users who rely on screen readers.

For more complex visualisations, it’s best to include a text summary near the chart or graph that explains the key takeaways of the data. Additionally, provide a well-structured data table as an alternative format. This allows users with visual impairments to explore the data at their own pace. The alt text for the chart should then guide users to the text summary and data table, giving them easy access to the full context.

If it’s not feasible to include a summary right next to the chart, you can use the aria-describedby attribute to point users to a longer description elsewhere on the page. This approach is especially useful for very detailed visualisations that require more space for explanation.

When including data tables, it’s crucial that they are well-structured. This means adding header rows and captions where appropriate so users can navigate and understand the table easily. Proper coding ensures that assistive technologies can interpret and communicate the data correctly.

Here are some best practices to make sure your interactive charts are accessible:

Users who rely on keyboards should be able to navigate and interact with every part of your chart. This means making all interactive elements focusable and operable using only the keyboard. Implement a logical tab order so users can easily move through the chart without confusion.

Tooltips often provide important context for data points in an interactive chart, so they need to be accessible. Make sure that users can trigger tooltips using only the keyboard and that screen readers can read them aloud. The A11Y Collective’s guide on tooltip accessibility offers more insights into making these elements fully accessible to all users.

Interactive elements like buttons, sliders, or data points should have clear, descriptive labels. Using proper semantic HTML and ARIA roles, properties, and states will ensure that screen readers can accurately convey what each element does and how users can interact with it.

While interactive charts offer dynamic user experiences, they can be more challenging to make fully accessible. Static data visualisations, on the other hand, are often easier for users to read, understand, and navigate. Whenever possible, prioritise static charts over interactive ones for a more straightforward, accessible experience.

At The A11Y Collective, our developers often use the Recharts library for creating graphs, as it offers easy styling and customization options. However, it’s important to note that Recharts is not fully accessible out of the box, so additional steps are required:

When selecting or modifying charts to make them accessible, it’s important to consider both the type of data you’re displaying and the needs of your users. Adapt common chart types like bar charts, line graphs, and pie charts to meet accessibility guidelines and ensure everyone can easily interpret your data.

To make bar charts accessible, make sure you label the bars and use more than just colour to differentiate them. Incorporate patterns or textures to ensure that users who are colourblind can still distinguish between data points. Also, make sure there’s enough spacing between bars so that they don’t blend together, helping users differentiate them more easily.

For line graphs, employ different line styles – like solid, dashed, or dotted – and use markers such as circles, squares, or triangles to distinguish between multiple data series. This helps users, especially those with visual impairments, easily follow the data without relying solely on colour. Also, don’t forget to label the x-axis and y-axis.

When using pie charts, keep things simple. Limit the number of slices, as too many can overwhelm users. Use clear labelling directly on or next to each slice, and, like with other charts, differentiate slices with patterns or textures in addition to colour.

For more complex visualisations, consider breaking them down into simpler, more focused views. For example, instead of overlapping multiple data series in one chart, use small multiples – several smaller charts that each focus on one aspect of the data. This makes it easier for users to process the information. Additionally, always provide text summaries of the key insights next to the chart to ensure that users who can’t interact with the visuals still have access to the data.

By considering accessibility from the start, you can design visualisations that are usable for everyone, regardless of their abilities. This ensures that your data reaches the widest possible audience and provides value to all users.

But remember, accessible chart creation is just one part of building a truly inclusive web experience. Accessibility extends far beyond data visualisations, and mastering it requires a deeper understanding of various principles and best practices. 

Since there’s always more to learn, we’re here to help you master the skills needed to create truly accessible designs at The A11Y Collective. Whether you’re just starting out or looking to deepen your knowledge, our courses provide practical, hands-on guidance to take your accessibility efforts to the next level.

Start mastering accessible web design now and become a leader in inclusive digital experiences. Dive into The A11Y Collective’s courses today and unlock the knowledge to create truly accessible websites that everyone can enjoy!