无需登录 数据私有 本地保存

焦点顺序书签工具 - 一键可视化 Tab 键路径

无障碍 调试 书签 可视化 焦点 路径
17
0
0
0

焦点顺序可视化工具

一键显示页面上所有可聚焦元素的 Tab 键导航顺序，帮助开发者检查无障碍访问体验。

拖拽此书签到浏览器书签栏

将下方按钮直接拖拽到浏览器书签栏，之后访问任意网页时点击该书签即可可视化焦点顺序。

📌 焦点顺序可视化

如果拖拽无效，请右键按钮 → 复制链接 → 手动创建书签粘贴URL

使用方式

  • 拖拽按钮到书签栏保存
  • 打开任意网页
  • 点击书签即可显示焦点顺序
  • 按 Esc 或点击顶部关闭栏退出
图例： tabindex="0" 或默认可聚焦（按DOM顺序） tabindex > 0（按数值优先） tabindex="-1"（Tab键跳过，可编程聚焦）

演示区域 — 点击下方按钮激活可视化

链接按钮 (tabindex=0) 隐藏按钮 (tabindex=-1)

此演示区包含多种 tabindex 值。正数 tabindex 会优先获得焦点（按数值从小到大），之后是 tabindex=0 的元素（按DOM顺序），tabindex=-1 的元素Tab键会跳过。

Tab 键焦点顺序规则
  1. tabindex > 0：按数值从小到大优先
  2. tabindex = 0：按 DOM 出现顺序
  3. tabindex = -1：Tab 键跳过，但可通过 JS 的 .focus() 聚焦
  4. 原生可聚焦元素默认 tabindex="0"（input, button, select, textarea, a[href] 等）
无障碍最佳实践
  • 避免使用正数 tabindex
  • 确保 DOM 顺序与视觉顺序一致
  • 为自定义交互元素添加 tabindex="0"
  • 使用 aria-label 提供语义
Bookmarklet 源代码
常见问题 (FAQ)

焦点顺序是指用户按下 Tab 键时，页面元素获得焦点的先后顺序。合理的焦点顺序是无障碍访问（WCAG）的核心要求之一。对于无法使用鼠标的用户（如视障人士依赖屏幕阅读器），Tab键是他们浏览网页的主要方式。不合理的焦点顺序会导致困惑、操作困难，甚至无法完成关键任务。WCAG 2.1 成功标准 2.4.3 明确要求焦点顺序必须保持意义和可操作性。

方法一（推荐）：将页面上的紫色按钮直接拖拽到浏览器的书签栏中，之后访问任意网页时点击该书签即可。
方法二：点击"复制书签代码"按钮，然后手动创建书签，将复制的JavaScript代码粘贴为书签的URL。
方法三：在本页面的演示区域，点击"在演示区激活可视化"按钮直接体验效果。激活后按 Esc 键或点击顶部关闭栏即可退出。

  • tabindex="0"：元素按DOM顺序参与Tab键导航，这是推荐的做法。
  • tabindex > 0（如1, 2, 3...）：元素优先获得焦点，按数值从小到大排列。不推荐使用，因为它会打断自然的DOM顺序，导致维护困难。
  • tabindex="-1"：Tab键会跳过该元素，但可以通过JavaScript的 element.focus() 方法编程式聚焦。常用于模态对话框、自定义组件等场景。

完全安全。该书签工具100%在您的浏览器本地运行，仅在被激活的页面上添加视觉覆盖层来显示焦点顺序。不会收集、发送或存储任何数据。代码完全透明，您可以在页面下方的源代码区域查看完整逻辑。关闭可视化后，所有添加的元素都会被清除，不会对原页面产生任何影响。

最佳实践是调整DOM结构使元素的出现顺序与期望的Tab顺序一致，而不是使用正数tabindex。具体方法：
1. 重新排列HTML元素使DOM顺序匹配视觉顺序
2. 使用CSS Flexbox/Grid的order属性调整视觉位置而不影响DOM顺序
3. 避免使用tabindex > 0，统一使用tabindex="0"
4. 对不可交互的装饰性元素不要添加tabindex

支持所有现代浏览器：Chrome 90+、Firefox 88+、Safari 14+、Edge 90+。书签工具使用标准的DOM API（querySelectorAll、getBoundingClientRect等），兼容性良好。移动端浏览器也支持，但在小屏幕上标签可能重叠，建议在桌面端使用以获得最佳体验。

本工具主要用于手动检查。如需自动化测试，推荐使用以下工具：
• Axe-core：Deque Labs 的无障碍测试引擎
• Lighthouse：Chrome 内置的审计工具
• Pa11y：命令行无障碍测试工具
• Playwright 的 page.keyboard.press('Tab') API 可模拟Tab键行为进行端到端测试。
🔧 相关工具