A11y: Should disabled/loading state buttons be tabbable?

Accessibility question, should disabled/loading state buttons be tabbable and read by screen readers?

Comments

[Suzanne Aitchison]

It's normal for a disabled button to be effectively hidden from screen readers. Personally, I don't think that's great, especially if the reason why it's disabled isn't obvious.

You can alternatively use aria-disabled, which announces the button but also the fact it's disabled. One thing to note however is that won't stop the button from being clickable so you'd need to handle that in your JavaScript.

I wrote a little bit about it on Up Your A11y you might find useful: Handling Validation Errors in Forms

[Anthony Cook]

Thank you, I will definitely be ditching disabled for aria-disabled. Seems like a much better experience.

Also didn't take error alerts in to consideration so many thanks for the great article!