Disabled buttons don’t have to suck!
AKA Inclusive Disabled buttons
Updated on 11 august 2017: improved solution on Codepen.
Disabled buttons often suck, but they don’t have to!
This is a different view on the article “Disabled buttons suck!”
I totally agree with the article that disabled buttons generally suck big time. But I don’t share his conclusion that it’s better to “ Just don’t disable buttons!”.
Didn’t read the article? Well, this sums it up:
Disabled buttons often suck because,
- often you can’t really tell if they are disabled, or you won’t be able to read / see the button due to lack of contrast;
- when you (accidentally) click them, you don’t get any feedback, leaving you in the dark;
- assistive technologies like screen readers often won’t be able to navigate to disabled buttons, so they won’t get any feedback on why they can’t find the submit button when they think they are done;
Disabled buttons are useful
What happens when you accidentally press Enter while in a form, if the submit-button is not disabled? Right, it will submit with all kinds of unnecessary errors and messages thrown at the user. Leaving them in confusion and anger. It’s in our muscle memory to press buttons we shouldn’t press (yet).
They also convey useful visual information to (at least some) users that the form is not yet completed or the option is not yet available.
Just make disabled buttons better already
There is no technical boundary for us to improve disabled buttons in order to convey meaning to all (inclusive design). So,
- get better contrast by using bigger font and/or darker colors;
- Give assistive technologies, like screen readers, some information at the end of the form, since they won’t read out information inside the button-tag (it’s often skipped).
- give users information when they tap, hover or click the disabled button. Or give them some other cue (e.g. through a tooltip-button). Preferably give them directions to the first field that needs input or correction;
- Remove the “disabled-attribute” from the button as soon as the last invalid field has it’s CSS selector “:invalid” removed.
See my implementation at Codepen for clarification:
If you want me to go into the details a bit more, have a counterpoint or just want to converse, just drop a comment below. Also, I suppose my solution could be improved, so if you don’t mind to share your ideas, I am open to conversation 😄