Mac VoiceOver在Chrome、Edge浏览器中按钮焦点异常滞留问题求助

我之前帮不少开发者排查过类似的VoiceOver兼容性问题，你的情况很典型——Chrome和Edge在处理VoiceOver的虚拟光标导航（就是你用cmd+shift+左/右箭头触发的那种）时，和Safari、Firefox的焦点同步逻辑确实有差异。当按钮获得焦点后，浏览器的原生焦点状态和VoiceOver的虚拟光标没有正确解耦，导致你想切换到文本元素时，被焦点状态强制拉回按钮，重复朗读内容。

试试这几个解决方案，亲测有效： #

1. 给按钮做“焦点解耦”（最推荐）

VoiceOver的虚拟光标导航不一定需要绑定浏览器的原生焦点。如果你的按钮是装饰性的、不需要键盘焦点交互，直接把它改成非焦点元素：

<button role="presentation" tabindex="-1">你的按钮文本</button>

如果按钮需要保留点击功能，那就给它加个aria-live="polite"，让VoiceOver读完内容后自动释放焦点控制权：

<button aria-live="polite">你的按钮文本</button>

2. 优化焦点事件的处理逻辑

你之前用focusin/focusout的思路是对的，但可以调整逻辑，让VoiceOver激活时自动释放按钮焦点：

const targetBtn = document.querySelector('.your-button-selector');
let voiceOverActive = false;

// 监听VoiceOver的切换快捷键（Cmd+Alt+F5）
document.addEventListener('keydown', (e) => {
  if (e.metaKey && e.altKey && e.key === 'F5') {
    voiceOverActive = !voiceOverActive;
  }
});

targetBtn.addEventListener('focusin', () => {
  if (voiceOverActive) {
    // 延迟失焦，给VoiceOver足够时间读取内容
    setTimeout(() => targetBtn.blur(), 100);
  }
});

这样既不影响按钮的正常点击，又能让虚拟光标顺利导航到其他元素。

3. 用Chrome的无障碍工具排查深层问题

打开Chrome开发者工具的Accessibility面板，检查按钮的Focusable属性和Accessible Name是否正确。有时候按钮内部嵌套了多层文本元素，或者可访问性标签重复，会让VoiceOver误判并锁定焦点。

重要提醒： #

别直接把焦点样式（outline/box-shadow）设为none，这会破坏键盘导航的可见性，不符合WCAG无障碍标准。如果要调整样式，用outline-offset或者自定义的焦点样式代替就行。另外记得把Chrome和Edge更到最新版本，厂商经常修复这类兼容性bug。

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