Charts, maps, plots, and graphs can be excellent tools for presenting data to audiences in an accessible way. You want your audience to be able to understand your message, regardless of their level of technical expertise, and data visualizations can help you accomplish that goal.
With that said, you’ll need to think about accessibility when presenting the data. Like all online content, data visualizations must meet the requirements of the Web Content Accessibility Guidelines (WCAG), the international standards for digital accessibility.
Here are a few tips to help you build visualizations that work for as many users as possible.
1. Think abut color when planning data visualizations
By nature, data visualizations rely on a single type of sensory perception (namely, vision). That creates some accessibility issues right off the bat — but you can limit those issues by using color in an accessible way.
WCAG contains several criteria that are intended to improve experiences for people with color vision deficiencies (CVD, also known as colorblindness) and low vision. Keep these concepts in mind when planning your content:
- Visualizations must meet WCAG’s requirements for color contrast. “Color contrast" refers to the difference in luminance (light) between text and its background; low-contrast text is more difficult to read.
- Remember that WCAG’ color contrast requirements apply to text and to images of text. Learn about WCAG’s requirements for color contrast.
- If possible, avoid using color alone to convey meaning. For example, if you have a line graph with two lines, consider making one of the lines dotted or hyphenated.
- When using different colors to denote different data points, use distinct hues (not shades of a certain color).
- Try to avoid using similar shades of red and green. Red and green are the most common colors that pose issues for people with CVD.
The Bureau of Internet Accessibility provides the a11y® Color Contrast Accessibility Validator, a free tool that instantly checks websites or specific color-pairs against WCAG guidelines. It’s a helpful resource to reference when building data visualizations.
For additional guidance, read: Use of Color for Accessibility Explained.
2. Wherever possible, avoid images of text
Text can be converted by different technologies and presented to users in a variety of ways. People who speak a second language can easily translate text to their native language; screen readers can quickly output text as audio or braille.
Images of text aren’t as useful, since most assistive technologies can’t read them. Artificial intelligence (AI) might eventually solve this problem, but we’re not quite there yet: AI tools still have trouble reading images of text — particularly if the image is fairly complicated, as is often the case with visualizations.
Wherever possible, use actual text and avoid images of text. You can build engaging, visually interesting visualizations with CSS, using HTML to structure the content in a way that makes sense. If you must use images of text, make sure to provide alternative text (alt text) that contains all of the text presented in the image.
Related: Using Infographics While Keeping Your Site Accessible.
3. If data visualizations are interactive, make sure they're usable with a keyboard alone
In recent years, we’ve seen beautiful CSS infographics that present new data points as the user scrolls through the page. To be clear, those types of presentations are fantastic for users! Dynamic data visualizations help to break complex information into understandable “chunks,” which makes them an excellent tool for accessibility.
However, complex visualizations may not function as expected when people aren’t using a mouse. Before publishing an interactive visualization, test it with a keyboard alone (no mouse).
For a detailed overview of keyboard navigation commands, read: Give Yourself An Accessibility Test: Don’t Use a Mouse.
4. Make sure data visualizations can reflow
Here’s another reason to use CSS instead of flattened images: HTML websites can change their presentation to fit the user’s viewport. That enables content to reflow, which means that it retains its functionality when resized, without requiring the user to scroll in two directions.
WCAG requires content to reflow, and today’s users expect a responsive design. Nevertheless, building responsive visualizations can be tricky; you’ll need to test the content to ensure that everything works predictably when the user resizes their viewport to 200% or more.
A simple way to test your design is to use your browser’s controls to zoom the page to 200% or more. Read: Give Yourself an Accessibility Test: Zoom Your Page to 200%.
5. Give users different options for reading the data
Inclusive design is about recognizing the wide variety of ways that people use digital content, and accessibility is a key component of inclusive design. Some users cannot perceive content visually, so they prefer text-based presentations of data. Others might strongly prefer visualizations. Some people might want a brief overview of key statistics, while others will want to dive into the data.
Your goal is to accommodate as many users as possible, so try to provide options. By challenging yourself to think about the preferences of different users, you can reach more people — and make your point more effectively.
If you’re building a digital accessibility strategy, we’re here to help. Talk to us to learn more or get started with a free and confidential website accessibility scan.
