为什么 Javascript IF keyCode === Enter 键或 Spacebar 键不能与 NVDA 屏幕阅读器一起使用？

Question

我正在研究客户站点的可访问性，我正在使用 JQuery/Javascript 检测是否按下了 Enter 或 Spacebar 键盘键，效果很好...

$(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
    }
};

...直到我打开 NVDA 以使用屏幕测试键盘导航 reader！它完全忽略了这个声明。偶尔，这会触发。就像每 10 次或 20 次键盘按下一次。选择何时触发并不一致

需要修改我的 IF 语句中的哪些内容才能使其工作？任何帮助将不胜感激。我在 Windows 上使用 Chrome 和 Firefox 对此进行测试。

Answer 1

我通过他们的 Slack 渠道联系了无障碍社区的人们：网络-a11y.slack.com

并且有人提供了 体面的 解决方案:

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.

Answer 2

可能不是 JavaScript。它可能在 HTML 中。某些角色和 aria 属性会告诉屏幕 reader 是处于浏览模式还是焦点模式（或应用程序模式）。

For example, when the tablist and tab roles are used as part of the tab widget design pattern, using the tab key to move focus onto the first tab in the set causes a Windows screen reader to automatically switch into applications mode. From that point all the keyboard interaction is handled by the script.

More about screen reader interaction modes here

NVDA User Guide

中有关 NVDA 浏览模式与焦点模式的更多信息

根据您正在构建的小部件类型（如果您要提供更多信息和您的 HTML 代码，也许我可以详细说明）您可能需要添加不同的角色或 aria 属性来告诉屏幕 reader 自动切换到最合适的模式。我建议您仔细查看 WAI-ARIA Design pattern 以了解您正在构建的任何类型的小部件。

此 link 包含有关哪些小部件触发焦点模式的附加信息 http://accessibleculture.org/articles/2012/09/aria-widgets-and-focus-forms-mode-support/

Answer 3

在您的小部件中添加角色="application" html 并尝试一下，它对我有用。

为什么 Javascript IF keyCode === Enter 键或 Spacebar 键不能与 NVDA 屏幕阅读器一起使用？

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

javascript

keyboard

accessibility

screen-readers

nvda