0

The ensure all elements are clickable using the Enter key, I'm using the following method:

document.addEventListener('keydown', function(e){
    if( e.keyCode === 13 ) {
        e.target.click();
    }
});

And for most clicks, it works really well. The problem is with elements that don't have a click event bound directly, but are clickable through bubbling up. For example:

jQuery(document).on('click', function(e){
    jQuery(e.target).addClass('active');
});

Clickable elements that are bound this way, will not be triggered using the first example. I've found out that NVDA, somehow, literally makes all elements clickable using the keyboard, whatever the method used to bind them. If NVDA is turned on, elements that are bound just like in example number 2 will be triggered.

I'd like to understand how NVDA does this (or if you have another idea to approach this) so I can copy that behavior to my application, that is being used by people with motor impairments and have to use the keyboard solely, without screen readers.

The solution has to be pure JS or jQuery.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Danigoodw
  • 379
  • 3
  • 10
  • Try using `$(e.target).trigger('click')`. Calling `click()` on the raw Element, is not going to invoke jQuery event listeners. – Taplar Nov 23 '18 at 21:50

1 Answers1

0

It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:

<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?

Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.

Andre Polykanine
  • 3,291
  • 18
  • 28
  • That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example). – Danigoodw Nov 23 '18 at 22:18
  • OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. *Everything* just doesn't work, I told you why. – Andre Polykanine Nov 24 '18 at 22:45
  • 1
    This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology. – andrewmacpherson Nov 26 '18 at 02:29
  • It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code. – Andre Polykanine Nov 27 '18 at 20:35