MAWD combines automated testing with your input to find everything you need to fixTry MAWD Free
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:
<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!
How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.