用途
Chrome DevTools Accessibility Debugging 是一个用于审计网页无障碍性的技能，基于 Chrome DevTools MCP 来验证辅助技术能够看到什么，以及键盘用户如何在页面中移动。其核心原则是：无障碍树（accessibility tree）是语义与焦点的主要事实来源，截图仅作为辅助视觉证据。
主要能力
- 运行 Lighthouse 无障碍审计，检查失败项，并通过快照与聚焦检查进行验证。
- 使用 take_snapshot 查看角色、名称、标题层级与当前聚焦元素。
- 通过 press_key 逐步测试键盘导航，并在每次移动后获取新快照。
- 检查缺失标签或表单问题，优先使用快照名称，必要时用 orphan-input 片段进行 DOM 确认。
- 检查点击目标尺寸或对比度问题，使用 references/a11y-snippets.md 中的片段，必要时进行视觉确认。
- 验证模态框、菜单、对话框的焦点进入、焦点陷阱与关闭后焦点返回。
- 使用 list_console_messages（types: ["issue"]）检查浏览器问题。
使用方式
技能通过 $ARGUMENTS 分派不同动作：
- 空参数：询问目标 URL/页面与关注的无障碍问题。
- 无障碍审计：运行 Lighthouse 无障碍审计，检查失败项，再用快照与聚焦检查验证。
- 缺失标签或表单问题：先用快照名称，再用 orphan-input 片段确认 DOM。
- 键盘/焦点问题：用 press_key 逐步操作，每次移动后获取快照。
- 点击目标或对比度问题：使用 references/a11y-snippets.md 中的片段，必要时视觉确认。
- 模态框/菜单/对话框问题：验证焦点进入、是否按预期被限制，以及关闭后是否返回。
标准工作流：
- 导航到目标页面并等待相关 UI 状态。
- 在页面重载安全时，以 navigation 模式运行 lighthouse_audit 获取基线。
- 使用 list_console_messages 检查浏览器问题。
- 捕获 take_snapshot，检查标题、地标、名称与顺序。
- 用 press_key 测试键盘导航并获取新快照。
- 仅对无障碍树中缺失的数据（如点击目标尺寸或手动对比度估算）使用片段。
- 报告失败项，包含选择器或 uid、观察行为、预期行为与修复建议。
适用场景
- 需要对网页进行无障碍审计时。
- 排查表单标签缺失、ARIA 标签问题。
- 排查键盘导航与焦点顺序问题。
- 排查点击目标尺寸或颜色对比度问题。
- 排查模态框、菜单、对话框的焦点管理问题。
限制与注意事项
- 无障碍树与 DOM 不同：视觉上隐藏的元素可能仍被暴露，可见元素也可能对辅助技术隐藏。
- Lighthouse 能发现大类失败，但需快照与聚焦检查确认用户影响。
- 不要将整个 Lighthouse 报告加载到上下文中；应提取失败审计项，例如：
node -e "const r=require('./report.json'); Object.values(r.audits).filter(a=>a.score!==null && a.score<1).forEach(a=>console.log(JSON.stringify({id:a.id,title:a.title,items:a.details?.items})))"
- 键盘导航需通过重复按键移动与新鲜快照验证。
- 报告无障碍发现时需包含观察行为、预期行为与修复建议。
参考文件
- references/a11y-snippets.md：用于标签、点击目标、对比度与页面级检查的 DOM 片段；当快照与 Lighthouse 证据不足时阅读。
- references/provenance.md：上游来源、提交、许可证与改编说明；在修改此技能或审计来源前阅读。
验证契约
在声明技能变更完成前，运行：
- uv run wagents validate
- uv run python skills/skill-creator/scripts/audit.py skills/chrome-devtools-a11y-debugging
- uv run wagents package chrome-devtools-a11y-debugging --dry-run
关键术语
- Accessibility tree：暴露给辅助技术的快照表示。
- Accessible name：为交互或语义元素播报的文本标签。
- Focus order：通过重复快照观察到的键盘遍历顺序。
- Lighthouse failure：评分为失败并附修复指导的无障碍审计项。