使用屏幕阅读器时，模态框箭头键导航捕获问题求助

问题原因 #

NVDA、JAWS这类屏幕阅读器在浏览模式下会优先捕获箭头键、部分Tab操作，用来在页面语义元素（如标题、列表项）间导航，此时按键事件不会传递给浏览器，导致你的keydown监听无法触发——这是屏幕阅读器的默认行为，目的是帮助用户高效浏览页面内容。

另外你原代码中的Tab键判断逻辑存在冗余：(e.key === 'Tab' && !(e.shiftKey && e.key === 'Tab')) 等价于 e.key === 'Tab' && !e.shiftKey，可以简化。

解决方法 #

1. 遵循无障碍模态框标准，减少自定义拦截 #

先确保模态框符合WAI-ARIA规范：

• 设置role="dialog"
• 添加aria-modal="true"
• 配置aria-labelledby关联模态框标题

现代浏览器配合屏幕阅读器会自动将焦点限制在模态框内，处理Tab键的循环导航，无需手动拦截所有Tab操作。

2. 触发屏幕阅读器的表单/应用模式 #

箭头键仅在屏幕阅读器的浏览模式下被拦截，当焦点落在可交互元素（如<input>、<button>、带tabindex="0"的自定义元素）上时，屏幕阅读器会自动切换到表单模式（NVDA）或应用模式（JAWS），此时箭头键会传递给浏览器，你的keydown监听就能正常触发。

如果模态框内是自定义非标准可交互元素，需要给元素设置tabindex="0"并添加合适的ARIA角色（如role="button"、role="listitem"），确保屏幕阅读器识别为可交互元素，自动切换模式。

3. 优化按键监听逻辑 #

调整代码，只在必要场景阻止默认行为，同时确保捕获真实按键：

component.addEventListener("keydown", function (e) {
  // 过滤非用户真实触发的事件
  if (!e.isTrusted) return;

  const isForwardTab = e.key === 'Tab' && !e.shiftKey;
  const isBackwardTab = e.key === 'Tab' && e.shiftKey;
  const isVerticalArrow = e.key === 'ArrowDown' || e.key === 'ArrowUp';

  // 仅当需要自定义导航时阻止默认行为，否则交给浏览器/屏幕阅读器处理
  if (isForwardTab || isBackwardTab || isVerticalArrow) {
    // 此处添加你的自定义导航逻辑，比如移动焦点到目标元素
    // moveFocusToNextElement(e);
    e.preventDefault();
  }
});

4. 手动提示用户切换模式（可选） #

如果模态框内没有足够可交互元素触发自动模式切换，可以在模态框的辅助文本中提示用户手动切换：

• NVDA：按Insert + F7切换到表单模式
• JAWS：按Ctrl + Insert切换到应用模式

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