纯键盘操作才是真测试，必须从新标签页打开页面后全程禁用鼠标，仅用tab/shift+tab/enter/space操作；焦点“消失”常因滚动容器缺tabindex="0"，模态框需确保开闭时焦点捕获与回退正确，devtools中focusable:true和focused:true才是真实可聚焦依据。

纯键盘操作才是真测试，鼠标一碰就失效

只按 Tab 键不等于完成了键盘可达性测试。一旦你用鼠标点过页面任意位置，Safari 会激活输入上下文，Chrome 可能缓存焦点状态，后续的 Tab 行为就不再反映真实首次访问体验。必须从新标签页打开页面后，全程禁用鼠标、不点击任何地方，只用 Tab / Shift+Tab / Enter / Space 操作。

常见错误现象：Tab 到某个按钮没反应，以为是 tabindex 问题，其实只是你之前点过它，浏览器已“记住”焦点；或者模态框打开后焦点看似正常，但关闭再打开就失效——大概率是首次未触发用户手势导致 .focus() 静默失败。

• 打开页面 → 立即按 Tab，观察第一个获得焦点的元素是否合理（通常是 logo 旁的导航链接、搜索框或主操作按钮）
• 持续按 Tab，同时盯住屏幕右上角的开发者工具 Elements 面板，选中 document.activeElement 查看当前聚焦节点
• 遇到焦点“消失”在滚动区域（如卡片列表末尾），不是 bug，而是容器没设 tabindex="0"，无法触发自动滚动
• 按 Shift+Tab 反向走一遍，确认路径完全对称；若反向跳过某元素，说明它被 tabindex="-1" 或 inert 拦截，但正向却进了流——结构不一致

用 DevTools 看 Focusable: true 才算真正可聚焦

视觉上看到 outline 框 ≠ 元素真的获得了焦点。很多项目重置了 outline: none 却没补 :focus-visible，导致键盘用户根本不知道焦点在哪。更危险的是：焦点可能已落在某个 div 上，但因为没加 role 或没监听 keydown，按 Enter 完全没响应——这是“假可聚焦”。

打开 Chrome / Edge 的 Elements 面板，选中目标元素，在右侧 Accessibility 标签页里重点看两行：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• Focusable: true —— 表示该元素当前可被 Tab 到（tabindex 有效、未被 disabled、没被 display: none 或 aria-hidden="true" 拦截）
• Focused: true —— 表示此刻确实获得了焦点（可配合 Tab 实时验证）
• 若 Focusable: false，优先排查：disabled 属性、父级 inert、visibility: hidden、或 CSS 中 opacity: 0 + pointer-events: none 组合（后者不影响聚焦，但常被误用）

滚动容器里焦点“不见了”，其实是它自己没资格进 Tab 流

焦点移到最后一个可见卡片后继续按 Tab，页面没滚动、焦点像消失了——这不是焦点丢失，是滚动容器（比如 div class="card-list"）本身不可聚焦，浏览器无法知道“下一个可聚焦项在视口外”，也就不会滚动。

解决方法很简单：给容器加 tabindex="0"，让它成为 Tab 流中一个合法节点。这样当焦点到达容器时，再按 Tab 就会自然进入其第一个可聚焦子项，同时触发滚动行为。

• 容器必须有 tabindex="0"，子项也得是原生可聚焦元素（button、a[href]）或带 tabindex="0" + role 的自定义元素
• 子项不能被 display: none 或 visibility: hidden 隐藏（opacity: 0 不影响聚焦）
• 移动端 Safari 下，若容器是 JS 动态插入的，首次 Tab 可能跳不过去，需用户先点一下页面再试
• 不要给容器设 tabindex="1" 或更高——它不需要“插队”，只需要“参与”

模态框焦点捕获和回退最容易漏掉的两个动作

模态框打开时焦点没进框内、关闭后焦点没回到触发按钮——这是键盘测试失败最典型的场景，也是自动化工具几乎无法覆盖的手动检查点。

打开模态框后，立刻检查 document.activeElement 是否落在第一个可操作元素上（如“确认”按钮）。这个按钮如果是自定义 div，必须有 tabindex="-1" 才能被 .focus() 成功调用；如果是原生 button，则无需设 tabindex，直接 .focus() 即可。

• 模态框关闭时，焦点必须切回触发它的元素（比如“编辑”按钮），否则键盘用户会卡在空白页
• 触发按钮若原本没有 tabindex，关闭后无需额外处理；若曾临时加过 tabindex="-1"，关闭时要记得恢复（比如删掉该属性或设回 tabindex="0"）
• 遮罩层（overlay）应设 tabindex="-1" 并监听 keydown，按 Esc 时先关闭模态框，再把焦点切回触发源
• 所有这些操作都依赖用户首次手势（click/touch）已触发，否则 Safari 会忽略 .focus()

复杂点在于：焦点管理不是单点设置 tabindex 就能闭环的事，它横跨 HTML 结构、CSS 可见性、JS 聚焦逻辑、以及移动端运行时限制。最容易被忽略的是——你以为焦点在那儿，其实它早被父容器的 inert 或某个隐藏的 aria-hidden="true" 截胡了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！