无障碍审查

基于真实实现执行证据化审查。默认目标为 WCAG 2.2 AA；AAA 或项目自己的更高标准必须单独标注，不能混写成 AA 硬要求。

1. 确认范围与操作模式

• 优先审查用户点名或本轮刚修改的文件；不明确且会改变结论时再询问。
• 读取完整页面、相关样式、组件和交互代码，确认框架、目标设备及用户指定标准。
• 用户只要求审查时，仅输出发现；用户明确要求修复时，才修改文件并验证。

2. 对比度与颜色

• 普通文本对比度至少 4.5:1；大号文本至少 3:1。
• UI 组件、图标、边界和必要状态提示应满足非文本对比要求。
• 不允许只靠颜色表达成功、失败、选中或链接；同时提供文字、图标、形状或下划线等信号。
• 能解析颜色时给出实际比值、要求值和对应前景/背景；不能解析时明确说明限制。
• 纯白和纯黑、调色板风格等属于设计建议，不得伪装成 WCAG 失败。

3. 语义与结构

• 标题层级应连续、可理解，通常只有一个页面级主标题；不要把视觉字号当成语义层级。
• 优先使用原生元素：操作用 <button>，导航用 <a href>，表单控件关联 <label>。
• 有意义图片提供说明用途的 alt；装饰图片使用 alt=""。
• 表单不能只依赖 placeholder 充当标签。
• 原生 HTML 能表达语义时不要用 ARIA 重新造轮子；检查角色、名称、状态和值是否一致。

4. 键盘与焦点

• 所有可操作元素都能按合理顺序通过键盘到达，不使用大于 0 的 tabindex 修补顺序。
• 对话框支持焦点进入、约束与恢复，并能按 Escape 关闭；菜单、选项卡等遵循对应键盘模式。
• 焦点指示必须可见。删除默认轮廓时必须提供可靠替代；2px 轮廓和明显对比可作为强健目标，但标注其与 AA/AAA 门槛的区别。
• 长页面或重复导航较多时检查“跳到主要内容”链接。

5. 动效、表单与点击目标

• 尊重 prefers-reduced-motion；避免每秒闪烁三次以上，并为持续动效提供停止方式。
• 错误信息具体、与字段关联并可被辅助技术读取；必填状态不能只靠颜色。
• 使用合适的 type、autocomplete 和输入提示，避免妨碍密码管理器或移动键盘。
• WCAG 2.2 AA 的点击目标通常至少容纳 24×24 CSS px，或满足相应间距/等效控件等例外；触屏界面优先采用 44×44 CSS px 的增强目标。

6. 输出与验证

按“阻塞 / 重要 / 建议”分组。每条发现包含文件与行号、失败机制、适用标准、修复方向和验证方式，合并重复项并删除低置信度猜测。

若获准修复：先处理阻塞项，再处理重要项；完成后重新检查对比度、键盘路径、焦点、表单错误和响应式布局。最后汇总已修复、未修复及无法验证的项目。

示例

输入：“审查这个注册表单的 WCAG 2.2 AA 问题，只给报告。”

**输出：**报告指出提交控件使用不可聚焦的 <div onclick>、输入框缺少关联标签、辅助文字对比度仅 2.8:1；分别给出代码位置、AA 要求和修复建议，但不修改文件。

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。