How can I make a disabled button focusable, clickable, in general “interact-able”?


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?


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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.