Making Disabled Buttons more Accessible

TL;DR: Despite the fact that you may have good reason to disable a button for your users, it’s important to make sure to provide enough context for all users to avoid confusion and good user experience.

When auditing our Design System at Storyblok, I noticed that the disabled variety of our button was completely inaccessible via keyboard or screen reader. I could not detect it, interact with it - if I hadn’t seen it, I would not know it was there - which led me to investigate a little bit how we can make disabled buttons more accessible.

Let’s have a look.

The disabled Attribute

In HTML you can use the disabled attribute to mark an interactive element as disabled. This way, it’s not possible to interact with it, it’s unfocusable and unmodifiable. It usually also applies additional styling, visually greying it out or adding a hover state that indicates to visually that it’s not possible to click.

<button> Button </button>

<button disabled> Button </button>

This could be useful in some cases, for sure: for example, if a form field becomes irrelevant due to previous input - as no user input is needed anymore, the user does not necessarily need to know about the now disabled fields. No harm done.

If however, a “Save” button is disabled until certain information is filled out, but can not be discovered before completing a form - how would a user depending on assistive technology know the button is there to begin with? In this case, using something like aria-disabledmight be the better option.

The ´Aria-disabled´ Attribute

The aria-disabled attribute signals to assistive tech that a button is disabled. It does not change the styling nor the functionality - both of which need to be taken care of manually. An element with the ´aria-disabled´ attribute can also still receive focus and be interacted with.

So technically, there is no clear right or wrong - it, as always in tech, depends. It depends on your use case and intention, and the reasoning behind why you have disabled your element in the first place.

Other Considerations

Color Contrast

Another very common issue with disabled buttons is their styling. More often than not, they are grayed out, leaving them with terrible color contrast and impossible to read. Be sure if you decide to disable a button (whether with the disabled or aria-disabled attribute) to check
the contrast ratio and opt for a color combination with sufficient contrat. While the Web Content Accessibility Guidelines (WCAG) do not require a specific color contrast ratio for disabled buttons or other inactive elements, it’s still advisable to make sure your users can distinguish the text on the button (or other element) and don’t have to squint at their screen.

User Feedback

Another common issue with disabled buttons is that it can leave the users guessing: is it really not working? Why is it not working? What am I doing wrong or what kind of input i missing?

Adding error messages and feedbac creates less confusion and a better experience for your users as they feel more in control of the situation.

Summary

In the end, there is no one size fits all and it highly depends on the context - but there are definitely a few things we can do to make sure disabled buttons are more accessible and user experience is improved for everyone.

What kind of best practises do you follow when disabling buttons? I’m curious about your thoughts, experience and of course feedback!

Resources

• https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/
• https://css-tricks.com/making-disabled-buttons-more-inclusive/
• https://uxplanet.org/disabled-buttons-in-user-interface-4dafda3e6fe7
• https://kittygiraudel.com/2024/03/29/on-disabled-and-aria-disabled-attributes/
• https://axesslab.com/disabled-buttons-suck/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled