什么是焦点顺序可视化工具？

粘贴任意HTML代码，即可看到键盘Tab键的导航顺序。每个可聚焦元素上都会显示编号标记，方便你一眼发现导航问题。专为无障碍审计人员和开发者检查WCAG合规性而设计。

可视化工具能识别链接、按钮、表单输入框、文本域、下拉菜单、details/summary 折叠组件、contenteditable 区域，以及任何显式设置了 tabindex 的元素。每个可聚焦元素都会获得编号徽章和标记，区分位置来自 DOM 自然顺序还是 tabindex 强制覆盖。它还会给页面打出 0 到 100 的评分，标出缺少可访问名称的控件（即只有图标的按钮问题），并显示有多少交互元素根本无法通过 Tab 到达。分析结果可以导出为纯文本报告，或导出为结构化 CSV，用于归档和缺陷跟踪。

使用方法

1. 将HTML代码粘贴到编辑器中，或上传HTML文件来检查Tab键顺序。
2. 每个可聚焦元素（链接、按钮、输入框）上会显示编号标记，展示Tab键序列。
3. 查看可访问性评分和问题面板，修复乱序、缺少名称或键盘无法到达的元素，然后将结果导出为文本报告或 CSV。

何时使用

• 页面提交 WCAG 2.1 AA 认证前的预审检查。
• 页面布局或组件重构之后排查 Tab 键顺序回归问题。
• 验证模态框或抽屉菜单是否正确捕获键盘焦点。

结果

一位无障碍顾问粘贴了客户的注册表单HTML。可视化工具抓到“提交”按钮比“服务条款”复选框更早获得焦点，原因是一个正数tabindex打乱了顺序。这就是一处WCAG 2.4.3违规。

常见问题

tabindex 设置正整数是不是总是错的？

几乎总是错的。正整数 tabindex（1、2、3……）会把元素从 DOM 自然顺序中提出来，导致光标在页面里乱跳。请坚持用 tabindex="0" 让非交互元素可获焦，或用 tabindex="-1" 在保留程序化焦点的同时移出 Tab 键链。

列表里的「自然」和「自定义」是什么意思？

「自然」表示元素的 Tab 位置来自 HTML 源码中的位置。「自定义」表示正整数 tabindex 把它强行挪到了别的槽位。自定义位置会被特别标出，因为这是 WCAG 2.4.3 不通过的最常见原因。

隐藏的元素会出现在焦点顺序里吗？

如果元素是 display:none 或 visibility:hidden，浏览器本身就会跳过，可视化工具也不会显示。但 aria-hidden 单独使用并不能移除可聚焦性，这是常见 bug。列表会显示这类元素，矩形数据能帮你判断它们是否可见。

工具能检测模态框焦点未被捕获的问题吗？

工具显示的是顺序，不会告诉你焦点是否会从模态框溜出去。粘贴模态框打开状态的 HTML，看看第一个和最后一个可聚焦元素是不是都在对话框内部。如果 Tab 键跳到了 body 的其他内容，就说明焦点陷阱缺失。

为什么我期望可聚焦的元素没出现在列表里？

禁用的输入框、没有 href 的 anchor 标签、没设 tabindex 的 div 都会被跳过，因为浏览器本来就无法聚焦它们。如果 div 需要可达，加 tabindex="0"；anchor 加上 href；input 移除 disabled 属性。

相关工具