autofocus没让talkback聚焦主因是其仅在html初始解析时生效且限于原生可聚焦元素，动态插入、多autofocus、隐藏元素、safari限制及语义缺失均导致失效。
autofocus 为什么没让 TalkBack 聚焦到目标元素
autofocus 只对原生可聚焦元素生效，<input>、<textarea></textarea>、<select></select>、<button></button> 和带 tabindex="0" 的元素可以，但 <div> 或 <code><span></span> 加了 autofocus 也无效。
常见失效场景：
- 多个
autofocus出现在同一页面 —— 浏览器通常只响应第一个，其余被静默忽略 - SPA 路由跳转后不重触发 ——
autofocus是 HTML 解析阶段行为，JS 动态渲染的节点不会自动激活 - 目标元素被
display: none或aria-hidden="true"隐藏 —— 即使有 autofocus，也会被焦点路径剔除 - Safari 在 iframe 或非用户手势上下文中禁用 autofocus，尤其在 iOS 上更严格
JavaScript focus() 调用后 TalkBack 没朗读
调用 element.focus() 成功 ≠ 屏幕阅读器播报。焦点转移了，但语义缺失或时机不对，TalkBack/NVDA 就只“沉默聚焦”。
必须同时满足：
- 元素要有明确的可访问名称：
aria-label、aria-labelledby或配对的<label for="id"></label> - 不能在 DOM 挂载前调用 —— React 中避免在
useEffect同步回调里直接.focus()，改用requestAnimationFrame(() => el.focus()) - 若聚焦的是容器（如弹窗根节点），需先设
tabindex="-1"，否则无法获得焦点 - 旧版 TalkBack 对非表单元素的
focus()不主动播报，可加aria-live="polite"区域触发通知
DOM 顺序和视觉顺序不一致时焦点路径就乱了
焦点路径由 DOM 顺序 + 可聚焦性决定，不是靠 CSS 排列。用 flex-direction: column-reverse 或 position: absolute 打乱视觉流，但 DOM 还是线性排列，键盘用户 Tab 时就会跳错位置。
真实影响：
- 视觉上“标题 → 表单 → 提交按钮”，但 DOM 写成“表单 → 标题 → 提交按钮” → 焦点先落输入框，再跳回标题，破坏认知连贯性
-
<nav></nav>用<div> 堆链接，没套 <code><ul></ul>→ 键盘方向键无法导航，读屏器也不报“第1项/第2项” - 动态插入校验提示（如错误消息）直接
appendChild到document.body末尾 → 它会出现在焦点路径最后，Tab 键跳过它 - 被
<table>、<code><ul></ul>或<div role="group"> 包裹 → 地标传播中断，NVDA/VoiceOver 直接当普通容器处理 <li>内部没有可聚焦元素（比如只有文字，没 <code><a></a>或<button></button>）→ 读屏器判定为不可交互，跳过不读 - 多个
<nav></nav>没加aria-label→ 全部朗读为“导航”，用户无法区分主导航、页脚导航、面包屑
修复方式：新节点必须插到逻辑位置，比如错误提示用 insertAdjacentElement('afterend', errorEl) 插到对应 <input> 后面。
和
<main></main> 必须是 的直系子元素，且全页只能有一个。一旦被包进 <div class="layout">、<code><section></section> 或 <header></header>，屏幕阅读器就找不到“核心内容”锚点 —— Lighthouse 报 “Multiple main landmarks” 是硬性失败，不是警告。
<nav></nav> 同样敏感：
真正起作用的不是标签名本身，而是浏览器暴露给辅助技术的 role、name 和 level。DevTools 看得见 <nav></nav>，不代表它被识别为地标 —— 得用 NVDA 的 Insert+Tab 或 VoiceOver 的 Ctrl+Option+U 验证。
