如何用原生HTML/JS设置TalkBack屏幕阅读器初始焦点

核心原因 #

普通focus()调用无法被TalkBack识别，本质是两类问题：

1. 调用时机不对：在DOMContentLoaded或者脚本同步执行阶段调用时，浏览器的无障碍树还没完成构建，屏幕阅读器还没完成初始焦点的接管流程，这时候设置的DOM焦点不会同步到无障碍服务的焦点队列
2. 目标元素不符合无障碍聚焦规则：如果聚焦的是非原生交互元素，又没做正确的tabindex配置，屏幕阅读器会直接忽略这个焦点事件

另外你之前写的document.querySelector('#foo\bar')存在语法问题：JS字符串中\是转义符，\b会被解析为退格控制符，根本匹配不到id为foo\bar的元素，这也可能是焦点设置失效的原因之一。

具体实现步骤 #

1. 配置目标焦点元素的无障碍属性 #

如果你的初始焦点要落在非交互元素上（比如页面主标题、主内容容器），给目标元素添加tabindex="-1"即可：

<!-- 示例：初始焦点落在页面主标题 -->
<h1 id="mainEntry" tabindex="-1">网站主标题</h1>

• 不要给静态内容元素加tabindex="0"：这会把静态内容加入键盘Tab遍历序列，打乱正常的键盘导航逻辑
• 不要直接给<body>/<html>根元素设置焦点：TalkBack对根元素的焦点处理存在已知bug，会触发全文朗读，体验极差

2. 在正确的时机调用焦点方法 #

等页面完成两帧渲染、无障碍树构建完成后再触发焦点，配合0ms setTimeout绕过TalkBack的初始焦点拦截逻辑，全版本安卓TalkBack、iOS VoiceOver都能正常识别：

/**
 * 设置屏幕阅读器可识别的初始焦点
 * @param {string} selector 目标元素CSS选择器
 */
function setScreenReaderFocus(selector) {
  const targetEl = document.querySelector(selector);
  if (!targetEl) return;

  // 等待两轮渲染帧，确保DOM布局、无障碍树挂载完成
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      // 宏任务兜底，避开屏幕阅读器初始阶段的焦点抢占逻辑
      setTimeout(() => {
        targetEl.focus({
          preventScroll: false // 不需要自动滚动到焦点位置时可设为true
        });
      }, 0);
    });
  });
}

// 页面全资源加载完成后调用
window.addEventListener('load', () => {
  // 注意id带反斜杠时需要双重转义，比如id为foo\bar时选择器要写'#foo\\\\bar'
  setScreenReaderFocus('#mainEntry');
});

注意事项 #

• 焦点设置完成后100ms内不要触发alert、弹窗、DOM节点移除/新增这类会抢占无障碍焦点的操作，否则会导致焦点丢失
• 如果是无框架的手动路由站点，每次路由切换渲染完新内容后，都可以复用上面的方法设置新页面的初始焦点，无需等待load事件
• 初始焦点建议优先落在页面主内容的开头位置，不要落在导航栏、广告位这类非核心内容区域，符合无障碍访问的交互预期

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