Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Javascript IF keyCode === Enter key or Spacebar key does not work with NVDA screenreader?

I am working on accessibility for client's site and am using JQuery/Javascript to detect if Enter or Spacebar keyboard keys were pressed, which was working great...

$(document).addEventListener('keydown', navKeyboardHandler);

navKeyboardHandler = function(e) {
    console.log('a keyboar key was pressed'); // This does work

    if (e.keyCode === 13 || e.keyCode === 32) { // Keyboard Enter OR Spacebar pressed
        console.log('enter or spacebar key pressed ! ! !'); // This does NOT work
    }
};

...until I turned on NVDA to test keyboard navigation with a screen reader! It just flat out ignores this statement. Once in a while, this will trigger. Like once out of 10 or 20 keyboard presses. It is not consistent as to when it chooses to trigger.

What in my IF statement needs to be modified for this to work? Any help will be greatly appreciated. I am testing this with Chrome & Firefox on Windows.

like image 244
allenski Avatar asked Mar 05 '23 11:03

allenski


1 Answers

I reached out to people in the accessibility community through their slack channel: web-a11y.slack.com

and someone provided a decent solution:

It probably won't fire because NVDA intercepts the keys if you are in browse mode, which is normal. If you were to manually switch to focus mode (insert + space -- you'll hear a "typewriter" sound), the code should get passed through.

like image 170
allenski Avatar answered Apr 26 '23 15:04

allenski