ARTICLE: Kyle Bentle

Accessibility tips to ensure your data visualization works for all EdTech users

Data visualizations can be powerful assets for your EdTech product. They tell clear stories that engage and inform your users. When designed simply and used selectively, data visualizations enhance learning experiences. Unfortunately, though, harnessing their power can be easier for some more than others.

Like all other features of your product, data visualizations should be accessible to all users, including those with disabilities. Accessibility guidelines for data visualization aren’t explicitly defined under Web Content Accessibility Guidelines (WCAG), so it’s easy for your team to deprioritize them. And sometimes your product designers may inadvertently neglect accessibility in their processes. 

Accessibility is becoming an expectation. Your potential users will prefer and choose products that have the highest accessibility standards. After all, they want to serve as many people as possible. And you should, too. Follow these tips to help you do so.

1. Keep Visualizations Simple

Trends abound. New, flashy, intriguing visualizations are compelling — and tempting to use. When it comes to data visualizations, though, just because you can doesn’t mean you should. 

The simpler you make your data visualizations, the better the users’ experience will be. That means avoiding:

  • Complex forms. Uncomplicated forms are generally easier to read. When you design for users with disabilities, all users benefit. 
  • Unclear label data. Users with cognitive or visual impairment benefit from having clearly labeled data points. When they have to rely on legends outside the visualization, they may misread the data.
  • Too much animation. At its best, animation can bring educational concepts to life. But it can also be distracting or even triggering to certain users. 

2.  Create Descriptive Text for Screen Readers

Since data visualizations are images, users with visual impairments  need accurate descriptions to achieve proper understanding. 

Instead of using generic titles for your visualizations, use the space to explain not only the image, but its purpose and intended takeaway. For example, rather than describing an image as a “chart of sales,” say, “This is a bar chart of sales by day, showing a 20% increase from May to June.”

If a visualization is more complex or is interactive, users should be able to move through the visualization with a screen reader audibly sharing data points.

While thoughtful alt text and long descriptions are not perfect alternatives to data visualizations, employing them makes your visualizations much more valuable to all users. 

3. Evaluate Your Color Choices

A significant portion of your users are color blind — according to healthline, up to 8% of men and 0.5% of women. And red and green color blindness is most common. And associations with red and green are deeply ingrained into our cultural consciousness. So of course, there is a strong impulse among data practitioners to utilize those colors. Instead of leaning on colors that may alienate users:

  • Directly label data. Don’t expect the colors to be the only messengers of information.
  • Use patterns and shapes to convey and differentiate information.
  • Run simulator programs like this one that show you what your image will look like to someone with red and green color blindness. 

4. Maintain Contrast Standards

WCAG provides minimum contrast guidelines your product should follow. Meeting those guidelines is easier with the help of tools like Stark. Stark’s Contrast Checker can ensure you’re meeting the WCAG contrast ratio. Stark offers a host of other accessibility tools, including color suggestions.

There are a variety of situations in which your users need stronger visualization contrasts —  these can be permanent, temporary, and situational. Whether your user has a life-long visual impairment or is struggling to see a phone screen in the sun, meeting  (or exceeding) minimum standards is an obvious win.

5. Ensure Your Visualization is Navigable With a Keyboard

Some users navigate your product with a keyboard instead of a mouse. You’ll want to create ways for them to perform essential functions with as little friction as possible. Whether interacting with the dashboard or a single visualization, keyboard users should be able to rely on arrow, tab, and return keys. 

Data can also be hidden in visualizations if a mouse hover is the only way to see it. Take care to design with keyboard users in mind, so simple tasks don’t become exercises in frustration for them.

6. Make Visualizations Scalable

Make sure your data visualizations can be scaled up and down and not lose meaning. When users have permanent visual impairments (or are just viewing your visualizations on a mobile device), scalability is key. 

Raster images, made up of square pixels, become blurry when a user zooms in on them. Not only does the image look poorly designed when enlarged, important details can be erased. That can add up to a subpar learning experience.

Vector images, on the other hand, use mathematical formulas to create lines and curves. When users zoom in on a vector data visualization, the image’s fidelity is maintained. 

7. Prioritize Accessibility in Your Workflow

Instead of retrofitting your product with accessibility, make it a priority from the beginning. 

  • Build a data visualization guide. Establishing a set of data visualization style standards takes guesswork and incoherence out of your design process. One of the guide’s primary elements should be accessibility.
  • Conduct appropriate research. Test out your data visualizations early with the right user panels. A diverse group of users can provide the insights you need to increase accessibility. 
  • Extend beyond compliance. Your product design must cooperate with ADA requirements, but truly inclusive design does more. Your product should work for all users, in all situations. That includes data visualizations. Guard against biases and design with empathy. 

The goal of data visualizations is to make information more understandable and actionable. If your design is exclusive, a portion of your users’ learning experiences will be negatively impacted. Evaluating and responding to a variety of different needs, then, keeps your data visualizations simple and clear. And that improves the learning outcomes of all users.

  • Photo of Kyle Bentle
    Kyle Bentle

    Kyle’s journey to the world of UX is an uncommon one. After earning a journalism degree from Ball State University with a concentration in graphic design, he spent the next decade working in news organizations in Jacksonville and Chicago. In his previous role as designer and journalist at the Chicago Tribune, Kyle juggled the needs of many stakeholders while collaborating on multidisciplinary teams under immense deadline pressure. As a data visualization expert, he brings a rare ability to analyze and translate complex information and concepts into engaging and understandable stories. Outside of work, he enjoys time with his wife, Lee Ann, and their dog, Scooter. Among his hobbies are biking, spending time outdoors, and painting poorly (his words).

Spread the word – help avoid the traps of digital product development!