Disabled buttons don’t have to suck!

AKA Inclusive Disabled buttons

Jul 29, 2017 · 2 min read

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 😄

Daniel Koster

Written by

User Experience Designer — Medior Frontend Dev — SEO expert — Accessibility expert (WCAG) — human

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade