为什么 Javascript IF keyCode === Enter 键或空格键不适用于 NVDA 屏幕阅读器？答案

【问题标题】：Why Javascript IF keyCode === Enter key or Spacebar key does not work with NVDA screenreader?为什么 Javascript IF keyCode === Enter 键或空格键不适用于 NVDA 屏幕阅读器？
【发布时间】：2018-09-10 16:27:53
【问题描述】：

我正在研究客户网站的可访问性，并且正在使用 JQuery/Javascript 来检测是否按下了 Enter 或空格键键盘键，这很好用...

$(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 以使用屏幕阅读器测试键盘导航！它完全忽略了这个声明。偶尔会触发。就像 10 或 20 次键盘按下一样。选择何时触发并不一致。

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

【问题讨论】：

标签： javascript keyboard accessibility screen-readers nvda

【解决方案1】：

我通过他们的 slack 频道联系了无障碍社区中的人们： web-a11y.slack.com

有人提供了不错的 解决方案：

它可能不会触发，因为如果您处于浏览模式，NVDA 会拦截密钥，这是正常的。如果您要手动切换到焦点模式（插入 + 空格 - 您会听到“打字机”的声音），代码应该会通过。

【讨论】：

有没有办法通过JavaScript触发（插入+空格）键盘事件？
似乎您无法做到这一点，因为它超出了浏览器的控制范围。有些用户可能默认使用此模式，而有些用户则没有，最终只是来回切换。最好的方法是尝试让点击事件发生，因为这在两种模式下都有效（取决于你的最终目标）。

【解决方案2】：

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

【讨论】：

不确定这会有什么帮助。您能否详细说明您的答案，您是否有链接/文档供参考？谢谢。
我认为他指的是这个帖子github.com/nvaccess/nvda/issues/7898#issuecomment-529384975

【解决方案3】：

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

例如，当 tablist 和 tab 角色用作 tab 小部件设计模式 的一部分时，使用 tab 键移动聚焦到集合中的第一个选项卡会导致 Windows 屏幕阅读器自动切换到应用程序模式。从那时起，所有的键盘交互都由脚本处理。

More about screen reader interaction modes here

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

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

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

【讨论】：