移除DOM元素后iOS VoiceOver仍聚焦已删除元素，如何触发阅读器更新？

问题场景 #

移除DOM中的按钮元素后，iOS VoiceOver仍会聚焦已不存在的元素，无法正常切换焦点，需点击屏幕才能恢复。

可行解决方案 #

• 移除前主动转移焦点
  在删除button2前，将焦点手动切换到其他可聚焦元素（如button1），确保VoiceOver的焦点目标存在：

  // 先转移焦点
  document.getElementById('button1').focus();
  // 再执行移除操作
  document.getElementById('content').removeChild(document.getElementById('button2'));
  

• 利用ARIA Live区域同步DOM变化
  给父容器content添加aria-live属性，让VoiceOver自动监听区域内的内容变更，无需手动干预焦点：

  <div id="content" aria-live="polite">
    <button id="button1" tabindex="1" ... />
    <button id="button2" tabindex="2" ... />
  </div>
  

  aria-live="polite"表示VoiceOver会在当前播报结束后，更新区域的内容感知，不会打断用户操作。

• 先标记隐藏再移除（兜底方案）
  若前两种方法无效，可先将元素标记为无障碍不可见，再执行移除，同时触发容器重绘强制更新辅助技术树：

  const button2 = document.getElementById('button2');
  // 先标记为不可访问
  button2.setAttribute('aria-hidden', 'true');
  // 移除元素
  document.getElementById('content').removeChild(button2);
  // 强制触发容器重绘，更新辅助技术树
  document.getElementById('content').offsetHeight;
  

注意事项 #

尽量避免手动设置tabindex（除非特殊场景），默认的DOM流顺序是VoiceOver识别焦点顺序的标准，手动设置可能导致焦点逻辑混乱。

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