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:

<div aria-hidden="false">
    <h5>Chart</h5>
	
    <div>Combination chart with 3 data series.</div>
    <div>Your yearly after tax income will be $54,303 which lasts until age 67 when you retire. After retirement, your desired income of $45,000 is made up of your super drawdown and age pension. Your super will run out at age 85, which you have a 66% chance of living to. From there you will live on $22,000 per year.</div>
    
    <div>The chart has 1 X axis displaying your age. Range: 40 to 105.</div>
    <div>The chart has 1 Y axis displaying after-tax income. Range: 0 to 60000.</div>
</div>

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:

<rect x="448.5" y="68.5" width="20" height="644" 
      ...
      role="img" 
      aria-label="Age 62 your take-home pay will be 54303 dollars"></rect>

You can go ahead and try it youself! Hit F12 on your browser and inspect the chart. The generated HTML is really nice :)

How was it done?

Making the site accessible turned out to be much more difficult than originally thought! The bulk of the work ended up being:

• Enabling the highcharts accessibility module and adding helpful descriptions to the axis, data points and general descriptions
• Fixing keyboard navigation. This meant making all important interactive elements focusable, so that you can tab through each item on the page
• Adding context around controls. This meant adding aria-labelledby or aria-label to help with screen readers, or adding <for> for labels
• Adding aria-hidden to controls that should be hidden to screen readers - and more importantly changing them to visible when they change dynamically
• Adding validation aria attributes like aria-required and aria-invalid
• Adding the role attribute to various controls where needed
• Fixing tags - sometimes there was an unneccesary tag that could be removed or the wrong tag had been used, eg a <div> element that should be a <button>. Or a <span> element that should be an anchor <a> tag
• Added the ability to use the enter key for activating focusable controls instead of just mouse click. Can also hit ESC when editing values to revert out of editing mode.
• Added grouping of controls so that screen readers can explain better which controls are grouped together

The following resources really helped:

• WCAG - Web Content Accessibility Guidelines quick reference was fantastic
• Google's How To Do an Accessibility Review was quite good.
• Deque's axe accessibility tester was helpful. I ended up installing the command line version, but it did return a few false positives, but it also picked up a few things that none of the other scanners found
• Firefox's accessibility issue checker was mildly interesting but ultimately not that helpful.
• Chrome's Lighthouse Accessibility checker is pretty much pointless. It gave me a very high ranking but the site was completely unaccessible.

We'd love to hear from any people who are using screen readers or find the app difficult to use.

Tags: calculator simulator accessibility features