如何强制移除屏幕阅读器中已销毁DOM元素的焦点？

核心问题原因 #

iOS Safari的VoiceOver在DOM元素被移除后，不会自动将焦点转移到其他有效元素——原焦点元素已不存在，导致焦点“悬浮”在原位置。修改元素的ARIA属性或role无法解决这个问题：这些操作是在元素移除前执行，但焦点仍停留在该元素上，移除后辅助技术找不到新的焦点目标。

推荐解决方案 #

1. 优先使用原生<button>元素（最省心方案） #

不要用<div>模拟按钮，原生<button>自带完整的可访问性语义、焦点管理和键盘交互支持，完全不需要手动添加role="button"或处理额外键盘事件，只需调整CSS样式即可：

<button class="button">Select</button>

原生按钮被移除后，VoiceOver会自动将焦点转移到页面下一个有效可聚焦元素，避免焦点悬浮问题。

2. 若必须使用<div>模拟按钮，手动转移焦点 #

如果受现有代码限制无法替换为原生按钮，必须在移除元素之前主动将焦点转移到页面上的持久可聚焦元素（如网站logo、导航链接等）：

步骤1：确保目标元素可聚焦

如果目标元素（比如logo）不是原生可聚焦元素（如<a>、<button>），需给它添加tabindex="0"使其可被聚焦：

<!-- 示例：给logo容器添加可聚焦属性 -->
<div id="site-logo" tabindex="0" aria-label="网站首页">
  <img src="logo.png" alt="网站logo">
</div>

步骤2：在移除按钮前执行焦点转移

在点击处理函数中，先将焦点转移到目标元素，再移除按钮：

function handleButtonClick() {
  // 获取持久元素（比如网站logo）
  const targetElement = document.getElementById('site-logo');
  
  // 转移焦点
  targetElement.focus();
  
  // 移除按钮元素
  this.remove();
}

另外，用<div>模拟按钮时必须保证完整可访问性：

• 添加tabindex="0"，支持键盘Tab聚焦
• 处理keydown事件，支持Enter和Space键触发点击：

<div class="button" role="button" aria-label="Select" tabindex="0" onclick="handleButtonClick.call(this)" onkeydown="handleButtonKeydown(event)">Select</div>

function handleButtonKeydown(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleButtonClick.call(event.target);
  }
}

为什么之前的方法无效？ #

修改role="none"、添加aria-hidden="true"等操作仅改变元素语义，但焦点仍停留在该元素上。元素被移除后，VoiceOver找不到新的焦点目标，因此会停留在原位置。只有在移除前主动将焦点转移到有效元素，才能解决问题。

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