Jaws读屏软件下Keydown监听器无法捕获ArrowUp/ArrowDown按键的解决方案咨询

以下是几个可行的解决思路，按优先级排序：

1. 确保目标元素获得焦点并阻止默认行为 #

JAWS默认会拦截方向键用于页面虚拟光标导航，只有当目标元素处于聚焦状态时，按键事件才会优先传递给元素本身。

• 给元素添加tabindex="0"使其可聚焦：

<div id="interactiveElement" tabindex="0">操作区域</div>

• 在JS中确保元素能获取焦点（可根据场景选择初始化聚焦或用户交互后聚焦）：

const elem = document.getElementById('interactiveElement');
// 初始化聚焦（可选）
elem.focus();

elem.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    // 阻止JAWS将按键用于虚拟光标导航
    e.preventDefault();
    // 执行你的回调逻辑
    handleArrowKeys(e.key);
  }
});

2. 使用语义化ARIA角色替代application #

role="application"会强制JAWS进入应用模式，完全改变读屏行为，容易引发兼容性问题。改用更具体的语义化角色，JAWS会自动适配方向键操作：

• 如果是列表选择场景，用role="listbox"和role="option"：

<div role="listbox" id="myListbox" tabindex="0">
  <div role="option" aria-selected="false">选项1</div>
  <div role="option" aria-selected="false">选项2</div>
</div>

这种情况下，JAWS会识别为可导航列表，方向键既可以触发你的事件监听，也能正常播报选项状态，无需额外复杂配置。

• 如果是表格类交互，用role="grid"/role="row"/role="gridcell"，同样适配方向键操作。

3. 检查JAWS虚拟光标模式（用户端适配） #

如果上述代码仍不生效，可能是JAWS开启了虚拟光标模式，此时方向键会被用于移动虚拟光标而非触发元素事件。用户可以通过按下Insert + Z切换到“表单模式”，但这属于用户操作，建议优先从代码层面解决。

内容的提问来源于stack exchange，提问作者Amit Chhetri