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

Question

我正在研究客户端站点的可访问性，并使用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对此进行测试。

Answer 1

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

有人提供了一个体面的解决方案

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

Answer 2

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

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

More about screen reader interaction modes here

有关NVDA浏览模式与焦点模式的更多信息，请访问NVDA User Guide

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

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

Answer 3

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