In the age of technology, data is everywhere. The volume of data we encounter can be overwhelming, especially if it relates a concept that is new to us or comes without context. What’s more, the rate of data being collected is doubling every two years!

Data visualizations are graphic representations that cut through the volume of data to deliver insights. Charts, graphs, and other visuals abstract the underlying data to help people identify patterns and unpack complex information. Adding accessibility features to visualizations is essential for providing the same insights to people with disabilities. From a usability perspective, accessible data visualizations feature multiple ways to absorb complex ideas. This makes visualizations more successful by creating a clear interpretation of data that anyone can understand.

7 Tips to Make Your Data Visualizations Accessible

1) Consider a wide range of users

Consider the various ways users with diverse disabilities engage with information. Designing for a wide range of users will help ensure everyone can access the information you’re providing. The following tips help you put this mindset into practice by laying out solutions for users with sensory, cognitive, and physical disabilities.

2) Explore accessible charting software and products

New technology innovations are creating exciting possibilities for designing accessible data visualizations. This example demo by Highcharts, for instance, includes the option to hear a sonified chart. You can explore the possibilities of accessible charting platforms in more detail in these resources.

3) Write effective alt text

Charts, graphs, and infographics are inherently visual. To ensure people who use screen readers can have an equivalent experience via audio, be sure to include alt text for your data visualizations. This step can also assist non-screen reader users with cognitive disabilities to process the visual information with additional language.

An alt text description should be one sentence that includes:

  • The type of data visualization (ex: a bar graph)
  • What data is being depicted or measured
  • The general message the data conveys through the visualization
  • A reference to the long text description, which is covered in the next tip

Here’s an example you can use as a model for your alt text: “A line graph showing the rising rate of tablet ownership in the U.S. since 2015, described under the heading Tablet Ownership Graph Description.” The last phrase points users to the long text description on the same webpage.

4) Write a long text description in plain language and provide context

If you’re depicting complex images, they will likely require a description longer than the one-sentence alt text. In these cases, you will need to add a long text description to your visualization and include a reference to it in the image alt text. Check out these approaches to providing long text descriptions in the HTML code.

Your data visualization will likely include a title, a caption, and a long text description to provide context. When crafting this content, try to explain the visualization, the context, and the story you want to tell in plain language and with concise descriptions. This makes it easier for anyone to understand your message.

5) Provide clear access to the data

While your readers need clear and concise titles and descriptions as an introduction to the data, you should also be transparent about where the data came from and how you used it to reach your conclusions. If the data came from an external source, include a link to the original data on the page. Also, it’s helpful to incorporate an alternative data table (this can be visually hidden like alt text) or a link to a CSV file so people can explore the raw data on their own.

This step also helps to future-proof your work. By including the raw data with your visualization, you’ll have an easier time updating it as needed. Many visualization programs allow you to link data sources that will automatically update the visualization as the source data changes over time. Make sure your accessible text descriptions stay current as well.

6) Don’t rely on color alone

When designing your data visualization, include different design elements such as patterns and shapes. These design elements will help those who can’t rely on color distinctions to interpret the visualization. Avoid very bright or low-contrast colors. Bright colors can be overwhelming for people with sensory concerns, while low-contrast text is difficult to read, especially for people with low vision.

It’s also important to directly label your data whenever possible, rather than using legends. This will make it easier for any user to understand what you’re depicting in your visualization.

7) Keep it simple by limiting extra effects

Hover effects are used to select an element when you mouse over it, and don’t easily work well with mobile devices and screen readers. Tooltips can extend off screen for users with magnification software, which means they won’t be able to see them while hovering. It can also cause issues for people with dexterity concerns. Minimize use of hover effects, when possible. If you do use them, provide an alternative alongside them.

Animations can assist people with increased comprehension of your visualization, but they can quickly create a confusing and overwhelming experience for users with sensory concerns. If using an animation, be sure to give the user control over how they interact with it.

Finally, be sure to use generous amounts of white space to increase legibility. It also makes the design look clean and smart!

Additional Resources

Complex Images | W3C

Charts and Accessibility | Penn State

Making charts accessible for people with visual impairments | Elsevier