{"id":17802,"date":"2019-03-29T14:20:49","date_gmt":"2019-03-29T14:20:49","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=17802"},"modified":"2026-01-12T10:10:05","modified_gmt":"2026-01-12T10:10:05","slug":"best-chart-accessibility-practices","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/best-chart-accessibility-practices\/","title":{"rendered":"Chart accessibility best practices"},"content":{"rendered":"\n
\n

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

In today\u2019s 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\u2019ve started to create interfaces with equality in mind \u2014 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 \u2014 accessibility.<\/p>\n\n\n\n

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<\/a> developed by the World Wide Web Consortium, the Internet manages to fulfill its goal \u2014 unrestricted access to information, despite the user\u2019s (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.<\/p>\n\n\n\n

As implementing additional features to support accessibility is \u201cadditional\u201d work, it may be tempting to brush it off as \u201cjust another gimmick\u201d. 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. \u201cA picture is worth a thousand words\u201d \u2014 and a good visualization of just how many people may not be able to perceive your message is equally powerful.<\/p>\n\n\n\n

According to Color Blind Awareness<\/a>, 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: \u201cThese 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.\u201d<\/i><\/p>\n<\/div>\n\n\n\n

\n

Strategies to Enhance Accessibility<\/h2>\n\n\n\n

There are a number of best-practices which enable your charts to be more accessible and convey your message in a clearer way.<\/p>\n\n\n\n

Use SVG pictures<\/b><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Text description<\/b><\/h3>\n\n\n\n

A great practice to follow is providing your users with a text description of the chart. The description can also serve as the chart\u2019s summary \u2014 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\u2019s creator, the viewer, on the other hand, may struggle to connect the dots: \u201cValue A has been on the rise throughout the last 4 years, but decreased significantly during the last quarter\u2026 why?\u201d<\/p>\n\n\n\n

Link to the demo <\/a>