Retirement Income Simulator

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:


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

Tag Cloud


updates (10) age-pension (6) design (2) retirement-planning (11) pdf (2) terms-and-conditions (1) government-co-contribution (1) asfa-retirement-standard (2) user-interface (2) retirement-age (1) compare-scenarios (1) regulations (1) ASIC (2) career (1) asfa-comfortable-standard (1) robo-advice (1) budget (4) inflation (2) asic (1) regulation (2) income-tax (1) 2016 (1) transfer-balance-cap (2) 2017 (1) fees (1) self-employed (1) feature (1) contribution (1) homeloan newfeature mortgage (1) regulation inflation assumptions (1) investment (1) assumptions (1) contributions (1) calculator simulator accessibility features (1) update (1)


Posts by Quarter

2020 q3

Calculator update 1 July 2020

2020 q2

Making the simulator more accessible
Two new RIS features

2019 q3

Deeming rate changes July 2019
Calculator update July 2019

2019 q2

Inflation update
Home loan feature

2017 q3

New enhancement for the self-employed
Calculator update July 2017

2017 q1

Calculator Updates for March 2017

2016 q4

Calculator Updates for December 2016
Inflation update
Calculator updates for October 2016

2016 q3

Modelling inflation in the simulator
Calculator updates for July 2016

2016 q2

Federal Budget 2016
Calculator updates for April 2016

2016 q1

Career changes in the Retirement Income Simulator
Changes to online calculator regulations

2015 q4

Calculator updates for December 2015
Alternative input methods for the Retirement Income Simulator
Retirement Income Simulator improvements for the retirement phase

2015 q3

Age Pension and ASFA Retirement Standard changes
How much super do you need?
Calculator Updates for July 2015

2015 q2

Congratulations to Media Super
Infographics for simplified retirement planning
Retirement Income Simulator gets a responsive redesign