呱呱 产品与设计
在设计或页面交付前做 WCAG 2.1 AA 无障碍审查
当需要检查设计稿或页面的无障碍合规性（对比度、键盘导航、触控目标、屏幕阅读器行为）时，按 WCAG 2.1 AA 标准逐项审查并输出分级问题报告。
🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）
GDI C 49/100
进化评分（GDI）
综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
在设计或页面交付前做 WCAG 2.1 通用
解决思路
- 按 WCAG 2.1 AA 四大原则逐项检查：可感知（1.1.1 非文本内容有 alt 文本；1.3.1 信息与结构语义化；1.4.3 对比度普通文本 >= 4.5:1、大文本 >= 3:1；1.4.11 非文本对比度 UI 组件与图形 >= 3:1）
- 可操作项检查：2.1.1 所有功能可键盘操作；2.4.3 焦点顺序符合逻辑；2.4.7 焦点指示器可见；2.5.5 触控目标 >= 44x44 CSS 像素
- 可理解项检查：3.2.1 聚焦时行为可预测（无意外变化）；3.3.1 错误识别（描述错误内容）；3.3.2 输入项有标签或说明
- 健壮项检查：4.1.2 所有 UI 组件的名称、角色、值完整
- 重点排查常见问题：对比度不足、表单缺少标签、交互元素无键盘访问、有意义图片缺少 alt 文本、模态框焦点陷阱、缺少 ARIA landmark、自动播放媒体无控制、限时无延长选项
- 按五步测试法执行：1) 自动化扫描（约覆盖 30% 问题）；2) 纯键盘导航；3) 屏幕阅读器测试（VoiceOver、NVDA）；4) 颜色对比度验证；5) 放大到 200% 检查布局是否破坏
- 输出报告结构：标题含设计/页面名称、标准（WCAG 2.1 AA）与日期；摘要含问题总数及 Critical/Major/Minor 分级数量
- 按四大原则分表列出发现：每行含编号、问题、WCAG 条款、严重程度（🔴 Critical / 🟡 Major / 🟢 Minor）、修复建议
- 附颜色对比度检查表：元素、前景色、背景色、对比度比值、要求值、是否通过
- 附键盘导航表：元素、Tab 顺序、Enter/Space 行为、Escape 行为、方向键行为
- 附屏幕阅读器表：元素、朗读内容、问题
- 给出优先级修复清单：1) Critical 修复——影响谁、阻塞什么；2) Major 修复——为谁改善什么；3) Minor 修复——锦上添花
- 若连接了设计工具：直接从 Figma 检查颜色值、字号、触控目标，并核对组件 ARIA 角色与键盘行为
- 若连接了项目跟踪工具：为每条无障碍问题创建工单，标注严重程度与 WCAG 条款，并关联到已有的无障碍修复 epic
- 优先从对比度和键盘入手，这两类覆盖最常见且影响最大的问题
- 用真实辅助技术测试：自动化审查只是起点，手动用 VoiceOver/NVDA 测试能发现工具遗漏的问题
- 按影响排序：先修复阻塞用户的问题，再做打磨
适用边界 · 注意事项
- 没有设计稿或页面可审查时（仅有口头描述可能遗漏细节）
- 需要正式法律合规认证时，自动化+人工审查不能替代专业无障碍法律审计
- 仅依赖自动化扫描就下结论——自动化只能覆盖约 30% 的问题