WebAIM - Web Accessibility In Mind

E-mail List Archives

[Web Component Development] How can I block the click event of the custom disabled elements?

for

From:
Date: Mar 16, 2021 4:34AM

Environment:

Testing environment
AT: NVDA 2020.4
OS: Windows 10 v2004
Development Tools and environment
Code Base: Javascript Basic, ES2015
Tools: Webpack 5, Babel 7


Hello, I'm working as an accessibility tester, in the accessibility consultant team of a social enterprise, For improving the web environment of my country.

We'll try to write the article for ways of making accessible web components and pattern libraries for web developers this year, at the Korean accessibility technology blog.

We've set the goal of making a component that easy to make for every developer because it's the first try.

The first goal is explaining to make the accessible custom buttons.
We made it almost successfully. But, one trouble holds us.

We tried to implement the disabled state on our custom button.

Style, Okay, it was easy, Manage keyboard Focus, that was easy too. But, the mouse click event trouble has been stopping us.

When the HTML native button is disabled, We can't activate it in any way.
We tried a few ways to make the disabled custom button unclickable. But, custom buttons would be clickable for web navigating mode of screen-reader such as NVDA Browse mode, and in the Internet Explorer, we can activate it even mouse button click :(


We tried the below ways.

1. added event callback that returning Boolean false
2. added the "none" value in the pointer-events CSS property.
3. added the cover element for blocking mouse click with absolute position and z-index.

Do you have any good ideas?