Today I learned
Do not disable buttons
Recently, I stumbled over Kitty Giraudel's article
On disabled and aria-disabled attributes .
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 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
- On disabled and aria-disabled attributes by Kitty Giraudel
- Disabled buttons suck by Hampus Sethfors
- The problem with disabled buttons and what to do instead by Adam Silver
- Making Disabled Buttons More Inclusive by Sandrina Pereira
- Usability Pitfalls of Disabled Buttons, and How To Avoid Them by Vitaly Friedman
- Disabled Buttons in User Interface by Nick Babich
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email .
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