Accessible data visualizations

By Douglas Schepers, Fizz Studio; Frank Elavsky, Carnegie Mellon University

People with vision or cognitive disabilities often struggle with charts, graphs and diagrams as a source of information. People with disabilities also have a fundamental ethical and legal right to an equivalent experience of information access. 

For basic images, adding accessibility is as simple as providing “alt-text,” a short description of the contents of the image. For complex graphics, here are a few considerations and solutions.

User interface for data

Data visualizations in the print era were just static images. In the digital era, they are user interfaces for data, interactive explorations of data. Making visualizations customizable and accessible is the next logical step. 

Disabilities vary widely in type, degree and needs. Blind people prefer text to graphics, while people with low vision prefer graphics to text or a data table. Your readers know what works best for them. Provide accessible defaults and clear affordances for readers to customize the experience for their needs.

Consider other sensory modalities

Tactiles: Chancey Fleet, a blind graphics expert, stresses how tactile graphics can overcome “image poverty” in the blindness community. Tactiles are especially powerful for topological visualizations, such as maps or scatterplots, where data position is important. Ensure your dataviz is tactile-ready for embossing printers or refreshable Braille displays.

Haptics: For devices without tactiles, but with vibration feedback, haptics aren’t as detailed as tactiles, but are more widely available and can help users find the shape of the data.

Sonification: Adding interactive data-driven audio to your visualization can make it much more accessible, and even provide surprise and delight to all users.

Structure your chart like you would an article

A good article has a pithy title, a strong lede, clear heading hierarchy, cogent body details and a solid conclusion. The same goes for a chart. The title should provide a quick insight for the contents of the chart. The subtitle serves as the lede, and the caption as the conclusion; the chart itself provides the body details. Signal the hierarchy level of the title, subtitle, axis titles and axis labels with font-size and weight.

Tell a story with your chart

Break your chart into meaningful sections for screen readers to navigate a narrative. Mark pertinent details with annotations, marked visually and keyboard accessible.

Improve keyboard and screen reader navigation

Sequential access to data points imposes a cognitive and memory burden on screen reader users. Providing a keyboard navigation flow across and between data series.

Use direct labeling

Legends and hover effects impose a noticeable cognitive delay in chart comprehension. Use direct labels instead to improve speed of comprehension.

Ensure good color contrast

People with low vision need a strong contrast between graphical elements and the background, and between adjacent graphical elements. Add a contrasting border to low-contrast elements, or separate adjacent elements with whitespace.

Choosing good colors for people with color blindness or low vision is often the most obvious but trickiest issue to address. Confirm your chart works well in dark mode, and use accessible color palettes by default. Allow users to change the colors and contrast, if possible. Use a color-blindness simulator like Sim Daltonism to confirm your colors are distinct from one another with all types of color blindness.

Avoid patterns

Tactile graphics need pattern fills and stroke dashes. Otherwise, they increase the visual complexity and cognitive load of the visualization. Use color-blind safe palettes as the default, and enable a user option for patterns.

Print considerations

If your visualization is for print, your options are limited to the color, contrast and cognitive load issues noted above. Provide a link to a digital, more accessible version, if available. 

Beyond common charts 

Consider if the visualization you’re using is the best way to convey the data in the clearest way possible. Often you can convey your message with lower cognitive load by using a chart type or diagram more suited to your data, or even by breaking complex visualizations down into several simpler charts.

News sites are innovators in visualizations, so experiment with variations of charts and diagrams to tell your story. Those novel solutions also need special consideration for accessibility. How are your users meant to interact with the visualization — visually, with a mouse, or with a keyboard? What is the shortest path to insight for each of those modalities? How can you reuse principles from the more common chart types?

“Nothing about us without us”

Just as a journalist wouldn’t write an article without including the voices, experiences and perspectives of people with that disability, any graphics process should include consultation with people with disabilities — ideally in the design but at least in the review.

This doesn’t mean each individual graphic should necessarily be overseen by a blind person. Rather, the procedures and systems by which graphics are produced should be verified to yield accessible graphics by default.

Use the right tool for the job

Unless you have the time and resources to develop accessible data visualizations in-house, you are much better off using data visualization software that has been tested and affirmed to be accessible. 

If you can’t make the visualization you need with off-the-shelf software, set up a development process that does provide accessibility. 

More resources

This is a solid foundation to build accessible data visualizations, and there are many more considerations in Chartability’s guide on GitHub. As we age, disability comes for us all. And as we find ourselves using and viewing visualizations in different places, spaces and situations, a visualization made more accessible will be more inclusive and more usable for everyone.