NVDA下含aria-label/aria-labelledby的按钮内部图标焦点回退问题

• 页面内有两个带可聚焦图标的按钮，第一个按钮带有aria-label或aria-labelledby属性，第二个无此类属性
• 使用NVDA屏幕阅读器时，聚焦第一个按钮内的图标并按回车/空格，焦点会返回至按钮本身；第二个按钮无此问题
• 项目场景：带关闭图标的按钮，无NVDA时，聚焦图标按回车/空格可正常移除按钮，但启用NVDA时出现焦点回退问题。必须保留按钮的aria-labelledby/aria-label属性以满足无障碍需求，同时解决焦点问题

方案1：阻止图标元素的事件冒泡与默认行为 #

当图标被聚焦并触发回车/空格事件时，阻止事件冒泡到按钮，同时直接执行移除逻辑，避免按钮的默认行为导致焦点回退。

示例代码：

// 获取所有按钮内的可聚焦关闭图标
const closeIcons = document.querySelectorAll('.close-icon');

closeIcons.forEach(icon => {
  icon.addEventListener('keydown', (e) => {
    // 只处理回车和空格按键
    if (['Enter', ' '].includes(e.key)) {
      // 阻止默认行为（比如按钮的默认点击响应）
      e.preventDefault();
      // 阻止事件冒泡到父按钮
      e.stopPropagation();
      
      // 找到父按钮并移除
      const targetButton = e.target.closest('button');
      if (targetButton) {
        targetButton.remove();
        
        // 可选：将焦点转移到合适的容器或元素，符合无障碍要求
        const fallbackFocus = document.querySelector('.page-container');
        if (fallbackFocus) fallbackFocus.focus();
      }
    }
  });
});

方案2：优化无障碍结构，让按钮作为唯一焦点目标 #

更符合无障碍最佳实践的方式是将图标设置为纯视觉元素，不单独赋予焦点，让按钮本身作为焦点载体。这样NVDA会直接读取按钮的aria-label/aria-labelledby内容，用户按回车/空格直接触发按钮的移除逻辑，从根源避免焦点冲突。

示例HTML：

<!-- 按钮作为焦点目标，图标仅为视觉元素，添加aria-hidden隐藏给屏幕阅读器 -->
<button aria-labelledby="close-label" class="close-button">
  <span class="close-icon" aria-hidden="true">×</span>
</button>
<span id="close-label" class="sr-only">关闭此按钮</span>

（注：.sr-only是用于隐藏视觉元素但保留给屏幕阅读器的样式类）

绑定按钮的点击/按键事件：

const closeButtons = document.querySelectorAll('.close-button');

closeButtons.forEach(button => {
  // 处理点击事件
  button.addEventListener('click', () => {
    button.remove();
    // 处理焦点转移
    const fallback = document.querySelector('.content-wrapper');
    fallback?.focus();
  });
  
  // 确保键盘事件正常响应（可选，因为按钮默认支持回车/空格触发点击）
  button.addEventListener('keydown', (e) => {
    if (['Enter', ' '].includes(e.key)) {
      e.preventDefault();
      button.click();
    }
  });
});

方案3：调整按钮的焦点管理逻辑 #

如果必须保留图标的可聚焦性，可以在按钮的事件回调中判断当前焦点是否在图标内，若为真则直接执行移除逻辑，跳过按钮的默认焦点行为。

示例代码：

const closeButtons = document.querySelectorAll('.close-button');

closeButtons.forEach(button => {
  button.addEventListener('keydown', (e) => {
    if (['Enter', ' '].includes(e.key)) {
      // 判断焦点是否在按钮内的图标上
      if (e.target.classList.contains('close-icon')) {
        e.preventDefault();
        button.remove();
        // 焦点转移
        document.querySelector('.nav-bar')?.focus();
      }
    }
  });
});

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