Why you should not disable HTML buttons

DanielMay 26, 2023June 9, 2023

Disabled buttons don’t reduce errors. They make users spend time guessing what’s wrong!

Even dough you may think that the best errors are the ones the user never sees, disabling HTML buttons can be very detrimental to the user experience.

Here are some reasons why disabling HTML buttons can lead to frustration and bad UI:

1. disabled buttons don’t give feedback. When a form has errors then the user can look at the form fields, spot the problem and fix it
   
2. disabled buttons are hard to see because of the low contrast.
   
3. disabled buttons are not focusable using the TAB key, therefore not being accessible by visually impaired or keyboard users
4. disabled buttons can make the interface frustrating. For example, if the form has 2 errors and the user has provided just one valid answer and the button still stays disabled then this will generate a lot of confusion as the user may think the form should be valid
5. on mobile devices users may not notice the disabled button has become enabled if the button is not in the viewport
   

So, just don't start from this state:

<button disabled> Login </button>

Instead try to write clear label and hint text and enable the button so that the users can get feedback.