Marco Heine_

Today I learned

Do not disable buttons

Edit this Post Opens in new tab

Recently, I stumbled over Kitty Giraudel's article On disabled and aria-disabled attributes Opens in new tab. He explains the difference and when to use disabled and aria-disabled.

It depends on the the intent of the button. Here's a suggestion on when to use disabled:

If you have a form with plenty fields, and some of them become irrelevant based on the value of other previous fields, using the disabled attribute seems like a good option.

On the other hand, using disabled on the submit button for this form is a bad idea. Instead, using aria-disabled is the better solution.

This way, the button remains discoverable (it can be tabbed to) and interactive (it can be used to trigger form validation).

I had to think about this for a moment. It absolutely makes sense but I never applied it in my projects. When I built forms, I always disabled the submit button when the form was not valid.

Kitty mentions a lot of articles backing the point of not disabling buttons. One that stood out to me was the article Disabled buttons suck Opens in new tab by Hampus Sethfors. It's from 2017 but still relevant today. Hampus lists a lot of reasons why disabling buttons is a really bad idea:

  • 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 the error handling
  • They make users think
  • Disabled buttons disable disabled users

That's a long list of reasons. But what to do instead? I always thought to myself:

"If I disabled the submit button of my form, users will know for sure, that they are not done yet".

The solution is simple. Don't disable the submit button! Validate the user input and show an error message when the user tries to submit the form. Let the user click the button. Always.

Sources

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco