Search code examples
javascriptkeyboardaccessibilityscreen-readersnvda

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.


Solution

  • 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.