开启NVDA屏幕阅读器时如何实现自定义按钮键盘交互逻辑

NVDA默认处于网页浏览模式，会拦截除Tab外的绝大多数按键用于自身导航操作，只有当焦点落在符合WAI-ARIA标准的交互组件上时，才会自动切换到应用模式，将按键控制权交还给页面脚本。此前的实现未给按钮组标记对应ARIA角色，NVDA始终处于浏览模式，才会导致自定义按键逻辑失效。

• 第一步：标记标准ARIA角色
  给互斥按钮组的外层容器添加role="radiogroup"属性，组内每个按钮添加role="radio"属性，默认激活的按钮设置aria-checked="true"，其余按钮设置aria-checked="false"。

  该步骤是解决NVDA拦截按键的核心，标记完成后NVDA可识别到这是自定义交互控件，不再拦截Enter、Space、方向键的事件回调。

• 第二步：调整按键监听逻辑
  统一使用keydown事件做监听（不要使用keypress事件，NVDA对keypress的拦截优先级更高），按规则处理按键：
  • 识别到Enter键按下时，直接调用event.preventDefault()屏蔽默认的点击触发逻辑，不执行按钮激活操作
  • 识别到Space键按下时，先调用event.preventDefault()，再执行按钮激活的业务逻辑，同步更新所有按钮的aria-checked状态
  • 识别到右方向键按下时，调用event.preventDefault()，将焦点移动到当前按钮的下一个同级按钮，匹配需求中与Tab一致的交互逻辑
  • 建议补充左方向键对应移动到上一个按钮的逻辑，这是屏幕阅读器用户对单选按钮组的固有交互预期，可避免无障碍评测扣分项
• 第三步：事件委托优化
  将按键监听绑定在外层按钮组容器上做事件委托，无需给每个按钮单独绑定事件，减少性能消耗的同时，动态新增按钮时也无需重复绑定逻辑。

最小可用代码示例：

<!-- 按钮组DOM结构 -->
<div class="custom-btn-group" role="radiogroup">
  <button role="radio" aria-checked="true" class="group-item">选项1</button>
  <button role="radio" aria-checked="false" class="group-item">选项2</button>
  <button role="radio" aria-checked="false" class="group-item">选项3</button>
</div>

<script>
const btnGroup = document.querySelector('.custom-btn-group');
const btnList = btnGroup.querySelectorAll('.group-item');

btnGroup.addEventListener('keydown', (e) => {
  const currentActive = document.activeElement;
  // 焦点不在组内按钮上时不处理
  if (!currentActive.classList.contains('group-item')) return;
  const currentIndex = Array.from(btnList).indexOf(currentActive);

  // 屏蔽Enter键默认点击行为
  if (e.key === 'Enter') {
    e.preventDefault();
    return;
  }

  // 仅Space键触发按钮激活
  if (e.key === ' ') {
    e.preventDefault();
    // 重置所有按钮状态
    btnList.forEach(btn => btn.setAttribute('aria-checked', 'false'));
    // 激活当前按钮
    currentActive.setAttribute('aria-checked', 'true');
    // 此处写按钮激活对应的业务逻辑
    return;
  }

  // 右方向键移动焦点到下一个按钮
  if (e.key === 'ArrowRight') {
    e.preventDefault();
    // 若不需要循环焦点，可判断currentIndex为最后一个时直接return
    const nextIndex = (currentIndex + 1) % btnList.length;
    btnList[nextIndex].focus();
    return;
  }

  // 补充左方向键逻辑，符合无障碍交互规范
  if (e.key === 'ArrowLeft') {
    e.preventDefault();
    const prevIndex = (currentIndex - 1 + btnList.length) % btnList.length;
    btnList[prevIndex].focus();
    return;
  }
})
</script>

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