April 18, 2023
Accessibility
2
 min read

Disabled buttons: helpful or hurtful?

example of disabled button from dribbble.com
Screenshot of Dribbble upload page with disabled buttons in top right

I've known for awhile that disabled buttons aren't a great user experience (here is a Smashing Magazine article outlining more on that if you're interested), but it it an outright Web Content Accessibility Guideline (WCAG) violation? Let's take a look.

Which success criteria addresses disabled buttons?

The name of WCAG 3.3.2 Labels or Instructions wouldn't sound like it would pertain to disabled button states, but it does. The success criteria requires three things:

  1. All form fields need a visible label
  2. If there is no visible label there needs to be instructions available
  3. If the input field is required, it needs a label, instructions, or an error message

This third requirement sparked my interest. A form with multiple input fields needs to have either a label, instructions, or an error message. Should the multi-field form not have a label or instructions, along with a disabled Submit button, there would be no way to trigger the error message resulting in a violation of WCAG 3.3.2. Part of me also wondered if disabled buttons would be addressed in 3.3.1 Error Identification, but I guess there would be no way to validate the form fields if the button was disabled.

Are disabled buttons a WCAG violation?

However, disabled buttons aren't an outright violation. You can resolve the violation by providing either a visual label or instructions with the input fields alongside the disabled button to meet compliance. However, I think that inline error messages can sometimes be more informative than labels or instructions and would recommend anyone to remove their disabled button states from their design practices.

On an interesting note, Deque University advised that single-field forms do not need a label or instructions alongside a disabled submit button, which I think is interesting. They state that because the form only has one field, it indicates by default that it is required and does not need any additional information. Seems like a bit of a stretch for me.