NVDA覆盖上下箭头键事件致手风琴组件焦点环不显示问题求助

我用handleAccordionKeyDown函数实现了手风琴组件的箭头键导航，逻辑如下：

• 通过Tab键聚焦首个手风琴链接后，激活箭头键导航
• 导航到最后一个链接时，恢复箭头键的默认滚动行为
• 正常情况下，Tab和箭头键导航都能正确显示焦点环

但开启NVDA屏幕阅读器后，只有Tab导航能显示焦点环，箭头键导航的焦点环完全看不到——查下来是NVDA覆盖了箭头键的事件监听器导致的。我试过用JS动态设置aria-label，但没起作用。

想请教：NVDA激活状态下，怎么让箭头键导航时也能正常显示焦点环？

1. 用CSS强制键盘焦点可见 #

NVDA接管箭头键时，可能会屏蔽浏览器默认的焦点环样式，直接用focus-visible伪类强制设置键盘焦点样式，这是符合无障碍规范的写法：

.accordion-link:focus-visible {
  outline: 2px solid #005FCC; /* 替换成你项目的主题焦点色 */
  outline-offset: 2px;
}

focus-visible只会针对键盘触发的焦点生效，不会影响鼠标点击的元素，避免样式干扰。

2. 手动触发焦点状态 #

在箭头键导航的逻辑里，每次切换焦点后，手动给目标元素加一个临时的焦点样式类，确保浏览器能识别到焦点状态：

function handleAccordionKeyDown(e) {
  // ... 你的现有导航逻辑，比如判断上下箭头、获取目标元素
  const targetElement = getTargetElement(e); // 替换成你实际获取目标元素的代码
  targetElement.focus();
  
  // 临时添加强制焦点类，触发样式
  targetElement.classList.add('force-keyboard-focus');
  // 短时间后移除，避免影响后续交互
  setTimeout(() => targetElement.classList.remove('force-keyboard-focus'), 100);
}

对应的CSS：

.accordion-link.force-keyboard-focus {
  outline: 2px solid #005FCC !important;
  outline-offset: 2px;
}

3. 提高事件监听优先级 #

把你的键盘事件监听器设置为捕获阶段执行，这样会优先于NVDA的监听器处理事件，确保焦点设置逻辑先完成：

// 第三个参数设为true，开启捕获模式
document.addEventListener('keydown', handleAccordionKeyDown, true);

注意处理完事件后，如果不需要默认行为，记得调用e.preventDefault()和e.stopPropagation()，避免NVDA重复处理。

4. 修正手风琴的无障碍结构 #

确认手风琴组件的结构符合WAI-ARIA规范，错误的无障碍属性可能导致NVDA处理焦点异常：

• 手风琴标题按钮设置role="button"、aria-expanded（标识展开/折叠状态）
• 手风琴内容区域设置role="region"、aria-labelledby关联标题按钮的ID
• 确保所有可聚焦元素的tabindex属性正确（正常可聚焦元素设为0，不需要聚焦的设为-1）

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