Chart accessibility best practices

In this article, I will share with you the best chart accessibility practices, and how you can practically create an effective accessibility friendly charts.

In today’s world, design concepts like responsiveness are reigning supreme: as the line between web experience on different devices is ever so blurry, we design our products to be as universal as possible. With the mass adoption of smartphones, we’ve started to create interfaces with equality in mind — equality of desktop and mobile users, experience-wise. However, just like we bridge the gap between desktop and mobile paradigms, we should also focus on another important aspect — accessibility.

The aim of web accessibility is to address the needs that include visual, motor/mobility, auditory, cognitive/intellectual needs and/or seizures. Thanks to standards developed by the World Wide Web Consortium, the Internet manages to fulfill its goal — unrestricted access to information, despite the user’s (dis)ability. With charts and graphs relying heavily on colors and shapes as a way to convey the message, chart accessibility must be front and center for any web accessibility effort.

As implementing additional features to support accessibility is “additional” work, it may be tempting to brush it off as “just another gimmick”. It is not. Consider this fact about accessibility and color blindness (just one of many visual impairments): Imagine that you are not reaching 4.25% (i.e. the number of people with color blindness) of your audience because you are not using a microphone. “A picture is worth a thousand words” — and a good visualization of just how many people may not be able to perceive your message is equally powerful.

According to Color Blind Awareness, a non-profit dedicated to raising awareness of the needs of the color blind in the community, approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) in the world are affected by color blindness. Interestingly enough, these statistics are region-dependent: “These figures rise in areas where there is a greater number of white (Caucasian) people per head of population, so in Scandinavia, the figures increase to approximately 10-11% of men. By contrast in sub-Saharan Africa, there are few color blind people.”

Strategies to Enhance Accessibility

There are a number of best-practices which enable your charts to be more accessible and convey your message in a clearer way.

Use SVG pictures

One of the highlights is prioritizing formats that allow for better scaling across different display sizes (e.g. desktop vs mobile, etc): in this case, scalable solutions like tables and SVG will prove to be the most effective.

Text description

A great practice to follow is providing your users with a text description of the chart. The description can also serve as the chart’s summary — and this addresses a major caveat of data visualization: not only presenting the data in a beautiful way but helping the user draw a conclusion. Although the story the data tell may seem self-evident to the chart’s creator, the viewer, on the other hand, may struggle to connect the dots: “Value A has been on the rise throughout the last 4 years, but decreased significantly during the last quarter… why?”

Link to the demo

We can take this chart as an example and add a description to it: “This chart shows global sales figures for Apple Mac computers during the last 5 years (2014-present). The numbers indicate that sales increase dramatically in every 4th quarter, remain high in the 1st quarter, then decline rapidly in the 2nd and 3rd quarters. This tendency can be explained by Apple holding its annual event (where it showcases new devices) during Q4 — users buy the newest Macs during Q4 and subsequent Q1, but prefer to wait for newer devices during time periods of Q2 and Q3.”

Link to the demmo

Duplicate Data from Charts to Tables

Presenting raw numbers can be done via graphs and charts — but also via tables, especially when the difference is marginal (and precise numbers cannot fit into smaller parts of the chart).
Link to the demo

Shades

Using shades of the same color (instead of solid colors) allows for optimal accessibility:

Link to the demo

See the Pen
Browser market shares at a specific website, 2014 by mustapha mekhatria (@mushigh)
on CodePen.

Link to the demo

Patterns

The same logic applies to use patterns which allow differentiating various groups of data from each other:

Link to the demo

Link to the demo

Highcharts Accessibility API

Creating accessible charts may seem like a lot of extra work; however, you can simply use the Accessibility Module that comes with Highcharts, Highstock and Highmaps. All you have to do is to insert the following line to your HTML page:
<script src="http://code.highcharts.com/modules/accessibility.js"></script>

Now, the charts created have keyboard navigation support, support for navigating and reading the charts with a screen reader, and also include a hidden HTML screen reader information section above the chart with details about the chart structure and content.

To allow for better visibility on greyscale prints, we can increase the contrast via:

• Applying dash styles to line series. This will make lines distinguishable even on poor black/white prints, as shown in this live demo.Link to the demo
  

• Applying a pattern fill to areas, columns or plot bands. This can be accomplished through the featured pattern fill plugin. Note, however, that using patterns can also be visually distracting and cause unnecessary cognitive load. Subtitle patterns are often recommended.
  

Conclusion

Today’s technological progress has many features: virtual reality, artificial intelligence and many other technologies previously considered “sci-fi”. While working with Highchart’s accessibility API, I realized that accessibility is the true hallmark of this progress: all of a sudden, we as the developer community can help people with different visual impairments access information with ease. Accessibility is gaining in popularity and will surely be among the trends like cloud computing and VR. I’m really enjoying designing in this paradigm — and encourage you to add accessibility features to your product as well.