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 just describe it with a text alternative.
You can make it accessible using the Highcharts library, which is a comprehensive charting solution in JavaScript.
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="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/modules/export-data.js"></script>
<script src="//code.highcharts.com/modules/accessibility.js"></script>I won't go into how to implement Highcharts here as it's pretty straightforward and they have tons of demo code on their website.
An Example Chart
The additional scripts add keyboard navigability and some supporting info for screen readers, 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 showing static data rather than pulling live from a database, I'd go further and describe some key trends shown in the data in the description.
For the full text alternative, the accessibility module has added a "View data table" option to the chart menu.
This outputs the data in tabular format for a screen reader user.
It's all very simple to configure. If you're already using Highcharts, add in the accessibility module today!