My Accessible Website - Blog
Back to Tips

Dynamic data charts – how do I make them accessible?

You have a chart on your website showing the total number of pets owned by users. It's taking the data live from your database, so it isn't possible to describe it with a text alternative.

You can implement this using the Highcharts library. I won't go into how to implement Highcharts here as it's pretty straightforward and they have tons of demo code.

Here's an example:

What you might not know is that Highcharts has an accessibility module that you can enable on the charts. Basic usage is as simple as just referencing a couple more Javascript files alongside standard Highcharts.

<script src="https://code.highcharts.com/highcharts.js"></script>

    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

This adds keyboard navigability and some supporting info for screen readers out of the box, which you can also configure yourself in the chart.description option. For the above, I'd write something like "Column chart showing the number of pets owned by users of the site".

If the chart was actually showing static data rather than pulling live from a database, I'd go further and describe some key trends shown in the data.

For the text alternative of the data itself, the accessibility module has added the "View data table" option to the menu in the top right. This outputs the data in tabular format for the screen reader user.

It's all very simple to configure. If you're already using Highcharts, add in the accessibility module today!

Share on Twitter Share on Facebook Share on Google+

How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.

Get Poster

Comments