Make insights inclusive with accessible data visualization

Published Mar 7 2024 Last updated Apr 16 2024 5 minute read
accessible data a visualization
Contributors
  • Sean Dougherty
    Written by Sean Dougherty

    A copywriter at Funnel, Sean has more than 15 years of experience working in branding and advertising (both agency and client side). He's also a professional voice actor.

Data visualizations serve as shiny beacons in a sea of raw data. They transform complex data sets into actionable insights so that even non-expert consumers and stakeholders can understand the underlying data.

However, relying on bar charts, graphs, and images can inadvertently exclude users with additional considerations, like motor impairments or screen readers. To improve data accessibility, this article will offer practical strategies and real-life examples to inspire you to take action.

What is data visualization meant to do?

Data visualizations make complex data easier to understand. By utilizing color, interactive charts, and imagery, they communicate information in an easy-to-explore format; helping users identify trends and patterns.

Data visualizations are also a great way to convey information to stakeholders who may not work with data tables and charts regularly.

What are the challenges of accessible data visualizations?

Using data visualizations can make raw data less intimidating. But for some, colorful imagery or a line chart can be more disorientating than a table of numbers. In fact, by only providing users with a chart or a visual to represent your underlying data, you could be making your brand inaccessible to several groups of people.

Visual impairments

A line chart or infographic is a cost-effective way of communicating information. But for non-visual users or low-vision users, these options aren't accessible. Someone who is color blind will struggle to differentiate between data points within a colored bar chart. Similarly, those using assistive technology like a screen reader can't interpret visuals.

Motor impairments

Users with limited motor skills will struggle with interactive charts and complex data visualizations that require them to navigate the touchpad or mouse.

Cognitive impairments

Cognitive impairments like dyslexia create difficulty when reading labels and titles. As a result, it's harder to understand the context of the data set. This is especially challenging with more ornate fonts.

Situational impairments

There are also situational impairments. For example, if your visual isn't responsive to different screen sizes, it can be skewed on different devices and difficult to use.

Situational impairments include:

  • A parent holding a child may need to access the information one-handed
  • Someone with a hands-on job may have no hands free while accessing the data
  • Low contrast in bright sunlight may make the data difficult to read

You need to identify who your audience is and use visualization tools to create pieces that are accessible to everyone.

How to make data visualizations accessible

Research into accessible data visualization is ongoing. One MIT research team is making data visualization more accessible for blind and low-vision individuals by collaborating with Daniel Hajas, a University College London researcher who lost his sight at 16 years old.

The project aims to offer low-vision users an equally rich experience as visual users.

Hajas, who also works with the Global Disability Innovation Hub, says, "Researchers might see some connections between problems and be aware of potential solutions, but very often they miss it by a little bit. Insights from people who have the lived experience of a certain specific, measurable problem are really important for a lot of disability-related solutions."

Alan Lungard, a Computer Science and Artificial Intelligence Laboratory (CSAIL) graduate who co-authored the study, says, "There is no one-size-fits-all solution for accessibility. While existing standards don't presume that, they only offer simple approaches, like data tables and alt text. One of the key benefits of our research contribution is that we are proposing a framework."

The project will help screen reader users, but their work doesn't make data accessible to everyone. While researchers work to find a broader solution, there are ways you can start making your visualizations more accessible.

7 strategies for inclusive data visualization:

Data needs to be understandable within the context of the visualization as well as easy to comprehend without the visual in place. The strategies below are a great place to start to make for making data visualization — and other web content — more inclusive.

1. Simplicity

Complex data visualizations can be aesthetically pleasing but difficult to understand. Keep visualizations simple and provide text descriptions to allow others to interpret the underlying data.

2. Titles and labels

A chart title and direct labeling ensure users can understand the purpose of the data set and the chart or visualization. Labels should use plain language and provide a brief description of the chart type the data shown.

You should also label each data point, even if you've used different colors. This allows people with color blindness to differentiate between the data sets.

3.  Alternative text 

Providing alt text is a common practice for marketers when adding imagery to a web page, newsletter, or ad. You can also use this practice for data visualizations. Alt text means screen readers can translate the visual for the user.

An alternative text summary also optimizes your data visualizations for search engines. This, in turn, could improve your brand's search rankings.

To master your alt text for both search rankings and accessibility, include:

  • What visualization are you using? (e.g. infographic, line chart, bar charts)
  • What data set is the visualization showing?
  • Any trends and patterns it highlights
  • Where users can find a longer description or accessible data table for more detail

4. Colors and patterns

Different shades of the same color are often favored for different chart elements because they look nice. However, this doesn't provide sufficient contrast for users with color blindness.

The Web Content Accessibility Guidelines (WCAG 2.0) offer general guidance on the color contrast requirements needed for accessibility.

High-contrast colors shouldn't be the only way the information is differentiated, either. Labels, descriptions, white space, and patterns make visualizations (For example: different chart types and graphs) easier to understand.

5. CSS media features for animation and interactive data points

Animation can be distracting and confusing, potentially leaving some users feeling nauseous.

If you're using animation, use tools such as the 'prefers-reduced-motion' CSS media feature. This feature is available to front-end software developers and allows the end user to turn off moving imagery.

Those with cognitive or motor impairments may struggle to recognize interactive elements and miss key context or information. To prevent this, avoid hiding content behind a mouse hover. Keyboard accessibility is also important: Any action that can be done with a mouse should also be actionable via the keyboard.

It's also worth noting that flashing imagery could trigger seizures. They should be avoided if at all possible.

6. Data tables

An accessible data table is an easy way to make your data set more accessible for those using assistive technology. A data table can be read by a screen reader, and they're easier for mobile users, too.

But simply providing the information in a data table alone doesn't improve data accessibility. The data table should be accompanied by text summarizing any trends and relationships the user might struggle to identify.

7. Responsiveness

When it comes to web design and digital marketing, responsiveness has been a buzzword for years. Making sure your website is responsive to different screen sizes has become the norm. And your visualization needs to be the same. 

Users with visual impairments may use a larger font size or zoom in on things on their device. All of this means your visualization needs to be responsive so that elements don't overlap or require the user to scroll horizontally. Interactive data visualizations will work differently on different screens, to. Using modern visualization tools to co design your assets, it's now possible to adapt your designs for different devices.

pastedGraphic_1.png

Building a more inclusive future

By adopting some of the above strategies, dashboard designers can begin providing more accessible data visualizations as standard practice. Some, like University of Washington researcher Ather Sharif, are already seeing progress in this area and are excited about the future.

"I like to think of it as a movement where we're all finally coming together and improving the experiences of a demographic that has been largely ignored, especially when presenting data through visualizations," said Ather recently

We're still a long way from a fully inclusive future. But by considering your audience and the difficulties they may have in interpreting your own data points, we're on the right track.

Thankfully, with the help of intuitive data visualization software, improving data accessibility is just a few buttons away.

Accessibility data visualization at a glance

Data visualizations aim to simplify complex information. Therefore, those creating these visualizations should consider those with impairments. Current practices pose accessibility challenges, and there's a pressing need to rectify this.

Marketers need to start prioritizing accessibility within their advertising and data communication. They can do this by using the strategies mentioned and by working with those living with impairments in a constructive way.

Read more: All about data visualization

 

Want to work smarter with your marketing data?
Discover Funnel