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!

View solutions (including Codepen)

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:

not satisfied with my “design” or implementation? Neither am I, so feel free to fork it and make it better

Liked this? I got some of my ideas from https://inclusive-components.design where Heydon Pickering shows how to make components accessible for all, great stuff! Keep an eye on this one!

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 😄

Like what you read? Give Daniel Koster a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.