以 skill 自身的术语
此 skill 依据 WCAG 2.2 审计并修复 Web 无障碍问题,围绕 POUR ——可感知、可操作、可理解、健壮——以及 A、AA、AAA 合规级别组织。它运行一条以证据为导向的工作流:当有已渲染的页面可用时,先运行实时 Lighthouse 无障碍审计(lighthouse_audit,配合 Chrome DevTools MCP),用失败节点定位到具体组件,再用 take_snapshot 检查无障碍树,然后修复源码并重新运行。
如果缺少实时工具,Lighthouse CLI 或 axe 可以覆盖自动化那一半,同样的手动检查依旧适用。它内置代码级规则,涵盖替代文本、对比度、焦点可见性、目标尺寸、减少动效、表单错误和可访问的身份验证,另附一份按 critical、serious、moderate 分级的问题清单。
它产出什么
- 一份按优先级排列的问题清单,分为 Critical(立即修复)、Serious(发布前修复)和 Moderate(尽快修复)三个层级,并配有具名示例。
- 修正后的标记与可直接粘贴的代码片段,包括一个用于向辅助技术暴露图标按钮标签的视觉隐藏工具类。
- references/A11Y-PATTERNS.md 中的完整参考实现,涵盖表单标签、模态框焦点陷阱、跳转链接、ARIA 选项卡、实时区域、错误处理和屏幕阅读器命令。
工作方式
- 01运行实时无障碍审计
从已渲染的页面开始,运行实时 Lighthouse 无障碍审计:面向公众的通用页面使用移动导航模式,重新加载会丢失已认证状态时则使用快照模式。
- 02定位出错的组件
用失败的审计节点直接指向具体的组件或模板,而不是在整个仓库里检索通用模式。
- 03检查无障碍树
读取已渲染的无障碍树快照,检查名称、角色、状态、地标和标题层级,然后用键盘走一遍受影响的流程。
- 04修复源码并重新验证
改源码,而不是改已渲染的输出,然后重复同一项审计和同一项手动交互,确认修复生效。
- 05回退到 CLI 工具
没有可用的实时浏览器工具时,把 Lighthouse CLI 或 axe 的输出与同样的手动检查搭配使用,因为仅靠自动化只能覆盖一部分障碍。