用途
accessibility-audit 是一个用于审计网页无障碍性的技能，来自 serkan-ozal/browser-devtools-skills。它借助 ARIA 快照、无障碍（AX）树分析和 WCAG 校验来检查页面的无障碍状况。
当出现以下情况时，该技能会被触发：用户询问无障碍或 a11y；用户提到 WCAG 合规；用户想检查屏幕阅读器兼容性；用户需要审计 ARIA 角色与标签；用户询问键盘导航。
主要能力
- ARIA 快照：可获取整页或指定选择器的 ARIA 快照，返回 e1、e2 等引用；也可通过
--cursor-interactive纳入自定义可点击元素（带 cursor:pointer 的 div/span）。 - AX 树分析：可获取 AX 树快照，支持按角色过滤（如 button、link、textbox），支持
--check-occlusion检查遮挡，支持--only-visible仅查看可见元素。 - 键盘导航测试：可模拟按键，如 Tab、Enter、Escape，并可指定选择器。
- WCAG 检查清单：按可感知（图片有替代文本、视频有字幕、颜色不是唯一指示、文本对比度充足）、可操作（全部功能可键盘操作、无键盘陷阱、有跳转链接、焦点可见）、可理解（指定语言、表单输入有标签、错误信息清晰、导航一致）、健壮（HTML 有效、ARIA 使用正确、与辅助技术兼容）四类列出检查项。
使用方式
审计流程使用会话（session）组织命令：
- 打开页面并等待网络空闲：
SESSION="--session-id a11y-audit"
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle
- 获取 ARIA 快照（快速概览，返回引用 e1、e2 等），可选包含自定义可点击元素：
browser-devtools-cli $SESSION a11y take-aria-snapshot
browser-devtools-cli $SESSION a11y take-aria-snapshot --cursor-interactive
- 获取详细 AX 树：
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
--roles button,link,textbox,checkbox,radio,combobox
- 检查交互元素的遮挡：
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
--roles button,link \
--check-occlusion
- 测试键盘导航并截图记录焦点：
browser-devtools-cli $SESSION interaction press-key --key "Tab"
browser-devtools-cli $SESSION content take-screenshot --name "first-focus"
- 清理会话：
browser-devtools-cli session delete a11y-audit
常见问题检查
- 缺失替代文本：使用
--roles image检查图片。 - 表单标签缺失：使用
--roles textbox,checkbox,radio,combobox检查表单元素。 - 空按钮/链接：使用
--roles button,link检查无可访问名称的按钮和链接。 - 隐藏但可聚焦元素：使用
--check-occlusion检查可见性问题。
专项审计
- 标题层级：
--roles heading - 表单无障碍：
--roles textbox,checkbox,radio,combobox,button - 导航元素：
--roles navigation,link,menu,menuitem - 交互元素：
--roles button,link,tab,switch,slider
最佳实践
先用 ARIA 快照做快速概览；用带遮挡检查的 AX 树排查布局问题；按角色过滤以聚焦交互元素；同时检查可见与隐藏元素；报告前先仅用键盘测试；截图记录焦点状态；在不同视口尺寸下测试响应式无障碍。
适用场景与限制
适用于网页无障碍、a11y、WCAG 合规、屏幕阅读器兼容性、ARIA 角色与标签、键盘导航等审计需求。资料未提供该技能的其他平台支持、收费、价格或效果保证等信息。