Should I use disabled buttons on my website?

Hi,

I am upskilling on web accessibility and am unsure on what is best practices for dealing with disabled buttons.

Currently, the website we are developing has disabled buttons throughout the site and key journey’s such as user registration, login page etc.

Reading through blogs , I am finding a split between a yes and no.

Should we continue using and implementing disabled buttons or is there a better and more accessible approach? Should we remove disabled buttons from the site?

Any suggestions would be appreciated!

Many thanks!

2 Likes

Can I ask Shiv, when you refer to disabled buttons, what do you mean?

  1. Do you mean buttons that are disabled and therefore don’t function but may be identified by Screen readers?

  2. Do you mean that the button is disabled until certain criteria have been met? E.g. all fields completed on a form?

  3. Do you mean that there is a disability button that turns on or off certain features?

  4. Or finally, is it more an icon that indicates that the site has been optimised for Accessibility?

2 Likes

Under guidance of our accessibility strategist we are phasing out our disabled buttons that will become enabled later in the workflow. We are switching to having them enabled from the start and adding error messages for missing required fields/wrong inputs.
As disabled elements are hidden from assistive technology and don’t have to abide by contrast rules it can leave customers searching for buttons while not understanding what might be wrong in their input.

6 Likes

Hi Jane,

Yes, I meant buttons that are disabled until certain criteria have been met.

1 Like

Hi Shiv,

So there are pros and cons, not just for Accessibility but also for useability.

The main pro is preventing a user from progressing while missing key data. I think the cons below far out weight the pros though…

If a button is disabled and it isn’t clear why, or what information the user needs to supply, this can cause frustration with the form/site/app, and that frustration could lose you customers, mean you are not compliant to regulations or worse.

Additionally, when a button is disabled it is often ‘greyed out’, which may mean it’s contrast ratio fails WCAG guidelines, specifically the success criterion within the 1.4 Distinguishable Guideline.

While it might be obvious to some users that the button is disabled, those with visual impairments may not be able to tell, and because it’s disabled it won’t respond to their clicks.

An alternative way to do this, is leave the button enabled but make it conditional on the mandatory fields so when the button is clicked, instead of it doing nothing, it flags the error for the related mandatory information and identifies the field that the data is required in clearly.

The other challenge with a disabled button, because it cannot be clicked, users cannot necessarily trigger errors that guide them into understanding what should have been entered.

I’ve seen systems that when the wrong data is entered, an error is created, but if the field is missed entirely, it is only when the user clicks ‘next’ that the error for the missing data appears. This is usually because the validation is server-side and not client-side. So it only checks once they have tried to progress.

If the button isn’t disabled but will not proceed without the relevant data the user will trigger the error and better understand what is missing.

Here’s an example of what I mean if you visit the Universal Credit Login Page at Gov.UK and click the Sign In Button, you will see two errors appear guiding the user to the fields and the data required.

I hope that helps explain why disabling a button is not the best option to ensure users have provided the correct information. If you have it enabled but conditional then they can trigger errors to complete the page.

J

4 Likes

Hey Anna,

I would agree that disabled buttons are usually hidden from assistive tech but I have experienced ones that tell the user that the button is disabled (using the Aria-disabled label) but not why. This is just as bad, so I love the fact you are phasing out the disabled buttons in favour of enabled but conditional buttons.

Great work.

3 Likes