vanilla-framework
vanilla-framework copied to clipboard
canonical
Investigate aria-disabled vs disabled
There are some accessibility issues with using the native browser disabled attribute, as it hides the element from Assistive Tech.
The general advice is to use aria-disabled attribute but this doesn't come with the functionality of actually making the button disabled, or any of the styles. We need to look into how important it is to move to using aria-disabled, as it would be a lot of work.
https://a11y-101.com/development/aria-disabled
This article is super interesting https://axesslab.com/disabled-buttons-suck/
The main point is that we shouldn't be disabling buttons at all. (With aria-disabled or with disabled) but why?
- They fool users into clicking
- They are hard to see
- They don’t give any feedback
- They give design teams a reason to rush through error handling
- They make users think
- Disabled buttons disable disabled users
More evidence in this guide which states:
"It is a bad practice to disable buttons. Disabling the button prevents our chance to tell the user what is wrong. The user keeps clicking the button and is totally in the dark why nothing happens. Keep the button enabled. Let the user click the button. Then show the message why it can’t proceed."
What we should do instead - have them enabled and then show an error message when the user clicks them.
If you really, really want to indicate that a button is disabled, do some css magic and make it look a bit grey (but with sufficient contrasts). And then turn it green or blue when everything is filled in correctly. But keep the button enabled in the code at all times and put focus on an error message if it’s clicked and there’s something wrong.
Another interesting article: https://css-tricks.com/making-disabled-buttons-more-inclusive/
This article shares a lot of the same advice, that using disabled is the worst option, aria-disabled is second best and better still is to keep the button enabled and provide feedback on why the form can't be submitted
We discussed this issue in our Design Assembly today. It's a large task that has multiple repercussions across all our websites and applications. We are going to take some time to inform more ourselves on this matter, then I would like to organise a combined workshop across disciplines.
