箭头按键触发的keydown函数在JAWS/NVDA中失效的问题排查

我编写了一段脚本，当用户聚焦在指定元素上按下向下箭头键时，会展开/折叠对应区块。该脚本在未使用屏幕阅读器的所有浏览器中均可正常运行，在Safari搭配VoiceOver时也能正常工作，但启用JAWS或NVDA屏幕阅读器后就失效了。

相关代码如下：

JavaScript代码 #

$(".axxs-accordion .a-trigger").keydown(function (event) {
    if (event.keyCode === 40) {
    event.preventDefault();
    $(this).next(".a-section.collapsed").focus();
    }
  }); 

HTML代码 #

<div class="axxs-accordion">
  <h2 class="a-trigger" tabindex="0">Heading</h2>
  <div class="a-section collapsed">
    Content here
  </div>
</div>

疑似JAWS和NVDA劫持了箭头按键，求解决思路。

解决思路 #

• 遵循WAI-ARIA折叠面板规范重构控件：JAWS、NVDA这类屏幕阅读器会严格遵循无障碍规范处理按键，自定义逻辑若与规范冲突会被拦截。WAI-ARIA规定折叠面板的触发控件应为<button>（而非带tabindex的<h2>），需添加aria-expanded（标记展开状态）、aria-controls（关联对应内容区块ID）等属性。将标题包裹在按钮中，明确它是交互控件，屏幕阅读器就会把按键事件交付给控件处理，而非用于文档导航。
• 调整事件监听逻辑：部分屏幕阅读器会优先捕获keydown事件并标记为已处理，导致自定义脚本无法触发。可以尝试改用keyup事件（屏幕阅读器通常在keydown阶段处理导航，keyup阶段不会拦截）；或者在keydown事件中先检查event.isDefaultPrevented()，仅当事件未被阻止时执行自定义逻辑。
• 修正聚焦目标元素类型：当前聚焦的.a-section是普通<div>，不属于默认可聚焦元素，即使添加tabindex，屏幕阅读器也可能无法正确处理聚焦行为。确保聚焦目标是按钮、链接或带tabindex="0"的交互元素，同时给折叠区块添加aria-hidden属性，配合展开状态切换，让屏幕阅读器正确感知内容可见性。
• 使用标准键值判断方式：废弃event.keyCode，改用event.key === 'ArrowDown'进行按键判断，兼容性更好，也能避免部分环境下的键值识别异常。

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