无障碍审查
基于真实实现执行证据化审查。默认目标为 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。