We have just updated the simulator so that it's more accessible! We've pored through the WCAG 2.1 guide and implemented the recommendations. Now you can navigate the entire app using the keyboard, and it should be more screen-reader friendly.
The charts are also accessible, thanks to the release of Highchart's accessibility module. We've upgraded to the latest version of highcharts and added a whole bunch of annotations to each chart. We really like the way highcharts adds descriptive text for the chart.
Let's say we have the following chart:
If this was an image, all the screenreader will be able to tell you is the
alt text. However, this is highcharts, so the simulator will generate some nice HTML that makes it much easier to understand for a screen reader:
If the user wants to know the actual breakdown, then the individual data points are also highlightable, using the keyboard, and a description has been added to each data point:
You can go ahead and try it youself! Hit F12 on your browser and inspect the chart. The generated HTML is really nice :)
Making the site accessible turned out to be much more difficult than originally thought! The bulk of the work ended up being:
aria-labelto help with screen readers, or adding
aria-hiddento controls that should be hidden to screen readers - and more importantly changing them to visible when they change dynamically
roleattribute to various controls where needed
<div>element that should be a
<button>. Or a
<span>element that should be an anchor
The following resources really helped:
We'd love to hear from any people who are using screen readers or find the app difficult to use.