Keyboard accessibility and assistive technology

Question

I am trying to implement a keyboard accessibility script together with an assistive technology (NVDA).

My script captures arrow key press. code snippet:

$(document).keydown(function(event){    
    var key = event.keyCode || event.which;
    if(key == 40) //capture arrow key down
    {
         //do something evil
    }
}

The problem is, the assistive technology has its own keyboard bindings.

Is it possible to make them simultaneously work?

mmmmm - how about manipulating a hidden element on page if `keyCode===40` *then* check if the manipulation happened , *if not then ..* ?? — Rob Sedgwick, Mar 14 '14 at 11:36
Unfortunately we won't be able to determine what keyCode was pressed because no event was captured. The keyboard bindings of the assistive technology prevents the keypress event to be triggered). — JLineses, Mar 14 '14 at 11:48
Good list of event handlers for screenreaders - http://unobfuscated.blogspot.co.uk/2013_05_21_archive.html — Rob Sedgwick, Mar 14 '14 at 11:53
sorry, i stand corrected. the `.keydown` is triggered but keyCode for arrow key down is not captured. it seems that arrow keys are being used exclusively by the AT. — JLineses, Mar 14 '14 at 12:11
I'm posting this as a comment because I haven't tested it myself. But try to capture arrow keys inside a region marked as `role="application"`. I guess, in this case the AT should pass all the keys to the app itself. — Andre Polykanine, Mar 14 '14 at 12:43
@MenelionElensúlë - your comment worked for me. I used `role="menuitem"` instead since the items I am navigating with, are menuitems. — JLineses, Mar 21 '14 at 06:15
@JLineses Did you manage to solve this problem with `role`? Can you post an explanation with a code example as an answer? Thanks. — Cthulhu, Jun 19 '15 at 15:47
setting role="application" on a parent container helped to solve the problem — Denis Molodtsov, Jan 31 '17 at 21:37

score 0 · Answer 1 · answered Mar 15 '14 at 21:45

0

You have an error

$(document).on('keydown', function() {
    var key = event.keyCode || event.charCode;
    console.log("key " + key);
});

Note the on

$(document).on('keydown', function()

this should allow you to see the key hits in the console and then you can make your own mapping of the keys.

answered Mar 15 '14 at 21:45

alexmac

239
2
9

It seems, this is not an error, just an older jQuery notation. You could write something like `$("a").click(function() {...});` earlier. But now yes, `on()` is recommended for all events. – Andre Polykanine Mar 22 '14 at 12:04
It is code written by humans, we all write in different styles. – alexmac Mar 22 '14 at 15:40

score 0 · Answer 2 · answered May 01 '20 at 07:26

NVDA works in 2 modes: Focus and Browse. Modes can be switched using the NVDA key (CapsLock, if you have set it/Insert/Numpad Insert)

In Focus mode, controls are focused just as you would focus without NVDA. There would not be any conflict with arrow keys.

In Browse mode, NVDA uses

Up and Down arrow keys to navigate to the groups of content like cells in a table, from one Input control/component to another and
Left and Right arrow keys to read content by characters.

There too, I've NOT noticed it interfering with the keys that you would want to implement.

For an instance, you may test https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-scrollable.html with NVDA for both the modes.

Keyboard accessibility and assistive technology

2 Answers2