Accessible Disabled Buttons

Disabling a button is pretty straightforward using the traditional disabled attribute in HTML. The problem, though, is that it's not very accessible. We can do better. It's not just about being accessible either, as you can use some improvements to make an all-around better experience for your website visitors. And isn't that what web design/development is all about?

<button type="submit" disabled>Submit</button>

Why do we disable buttons?

Disabling a button is a visual way to communicate that action is unavailable because certain conditions haven't been met - like trying to submit a form whilst missing some required fields or trying to add an item to a website's shopping cart when the quantity is set to zero. Or websites with zero stock to sell instead of just replacing the buy button.

On its own, though, it can be frustrating for visitors as it lacks context and guidance. It's also inaccessible. Visitors shouldn't be left wondering why they can't click on a button that they want to. If there's no stock, why have a button to buy it, even in a disabled state?

For this article, we'll assume that disabling a button is the way forward, but I highly recommend checking out this brilliant post on better ways to display a disabled button.

Potential problems with disabling buttons

Imagine you have someone that can't use a mouse. Not everyone can for various reasons, such as motor impairment, which is why tabbing and focus indicators are essential.

Navigating through a page with a keyboard should be simple enough, but if you're on a shopping page and try to tab to a disabled button, you'll notice that the focus indicator skips over it entirely. If you're using a mouse, it's a simple thing to hover over the button to see that it's disabled, or in some cases, try to click it only to find it's disabled because it wasn't clearly displayed as a disabled button (why hovering indicators are a good thing).

Remember, interacting with a website via a mouse is just one way to interact with a site. Not all interactions are clicks of the mouse.

The goal is naturally to prevent a user from clicking on the button when you don't want them to, but by using disabled, you are not just preventing the click but also the focus, which might do as much harm as good. You might not see why, but consider people who can't use a mouse and don't know why they can't focus on the button via other means. There's a reason that focus exists and shouldn't be ignored, even if it can sometimes be overlooked by accident. I get it; there's a lot to think about that doesn't necessarily affect yourself, so it can be missed.

ARIA is here to help

Whilst disabling a button using the disabled attribute is handy, it's also doing more than is necessary. Using an ARIA attribute can do a better job. It allows us to add not only focus on the button but do so consistently to create an inclusive experience for more people and use cases. Now, why would you not want that?

<button type="submit" aria-disabled="true">Submit</button>

The disabled attribute to use instead of just disabling a button is aria-disabled="true". That allows the button, although marked disabled, to be still accessible by focus, and you can trigger a tooltip to explain why the button is disabled.

Aria-disabled is all about semantics. ARIA attributes never change the application behaviour or styles by default. Their only purpose is to help assistive technologies (e.g. screen readers) announce the page content more meaningfully and robustly.

You can then use jQuery to change the aria-disabled attribute to false when whatever event changes, which means you want the button to be clickable. Along with that jQuery, you can style the button to look disabled based on the ARIA attribute and the mouse pointer.

button[aria-disabled="true"] {
     opacity: 0.7;
     cursor: no-drop;
}

As for the jQuery, that's entirely up to how you want to do things. Simply disabling submitting on a form like the one below allows the button to be selected using a keyboard but won't let you use it. Adding validation to change the form state and ARIA attribute once everything is filled in will allow the button to work when required. Adding a tooltip or some form or notification when a user tries to click that aria-disabled button is essential for this to have true meaning. And it's just good practice. You should let your users know why they can't currently submit a form instead of leaving them wondering what they're missing.

$("form").submit(function(e){
    e.preventDefault();
});

Should you avoid disabled buttons entirely?

I'm not a big fan of disabled buttons. I think wherever possible, they should be avoided. It makes sense in things like pagination, though. But if you have a form, let users click that button. That's what error message feedback is for. Show users what they've missed and why clicking that button didn't submit the form as they expected. If you have an out-of-stock product, why should there be a button at all? Amazon actually does this one right.

It's not just an accessibility issue, it's a usability one. By swapping the disabled attribute with aria-disabled, we can make someone's experience much more enjoyable. But always consider whether a button is even needed. Sometimes it's better to remove the button and replace it with some text explaining why there is no button. Other times, where it's needed, make use of aria-disabled.