How can I make a disabled button focusable, clickable, in general “interact-able”?
Question
I have a button on my page which I'd like to make disabled. If I use
disabled as an attribute I can no longer tab navigate to it, or handle click events on the button. How can I maintain its disabled meaning, while being able to tab navigate to it, and handle events on it in javascript? Answer
Swap your disabled attribute for aria-disabled="true". This will allow the element to maintain most of its properties that allow you to interact with it, but still keep its disabled status and announce itself to assistive technology as such. Be sure to test your button thoroughly though after making this change because now that the button is able to be interacted with, you will likely need to add some additional logic to handle your aria-disabled state.
