moneyadviceservice/dough

Dough slider accessibility.

Opened this issue · 1 comments

We've been having a bit of trouble with making the dough slider accessible. This could be partly due to legacy implementations that aren't consistent with modern dough.

Here's a list of things we've come up against:

  • Slider is accessible by keyboard users, and screen readers are instructed on how to use the left and right arrow keys to use it — but mobiles don't have left and right arrow keys, neither do voice input users.
  • Screen readers seem to read out the slider's current percentage. This is not always what the user wants to hear — e.g. if the slider is controlling a value in the range £100,000 – £700,000.
  • Low colour contrast.

So far we've been responding to this by setting aria-hidden on sliders, leaving the text field to be used instead. This might be frustrating for some users who can see an element that they can't interact with, but that's just speculation on my part. However, if aria-hidden is the best solution, perhaps it should be the default?

Excerpts from DAC reports:

image

The screen shot above has been taken from the results page of the calculator. It shows an internal link which contains a slider which can be used to adjust a repayment amount. However, the instruction is included to use the left and right arrows to adjust the value. But this is not accessible to Talkback users.

image

As a vision impaired user, the slider option can prove difficult as the button cannot be seen due to poor contrast. The slider control would benefit from a solid colours button rather than the transparent current appearance. The progress shading would also benefit from increased contrasting.

image

Screen shot 4 has been taken from the results page of the credit card calculator. The screen shot shows a slider which can be used to adjust the repayment amount. There is the instruction to use the left and right arrows to adjust the repayment value. But, this is not possible for Talkback users. However, there is an edit box which can be used to input a different repayment amount. There needs to be a small piece of text to inform Talkback users that the edit field can be used as well as the slider to adjust the repayment amount.

Further reports from DAC:

The slider widgets are difficult to control due to their size, mobility impaired users may not possess the fine motor skills required to control them. This is consistent in Android and iOS.

image
image