设计工作
AI 无障碍检查清单
AI 无障碍检查清单从键盘、焦点、语义、读屏、对比度、缩放、动效、表单和错误恢复检查产品界面,并说明自动化与人工测试各自边界。
AI 可以依据代码、设计说明和测试记录生成无障碍问题清单,但不能仅凭截图证明页面符合标准。可靠检查要结合自动化扫描、键盘操作、语义树、屏幕阅读器、缩放、颜色与真实任务测试,并由了解实现的人复核。
| 项目 | 说明 |
|---|---|
| 阅读时间 | 约 9 分钟 |
| 适合人群 | 设计师、前端开发者、产品经理、测试工程师和内容设计师 |
| 核心产出 | 设计阶段清单、实现检查、辅助技术测试记录、问题分级和修复验收 |
| 使用前提 | 能访问真实界面或代码,并明确目标平台和支持环境 |
| 不适合 | 只做颜色对比截图就宣布合规,或让 AI 推断读屏名称与焦点行为 |
无障碍是持续质量工作,不是上线前一次打勾。具体法规与标准要求会随产品、地区和组织责任变化;本页提供工作方法,不构成法律合规结论。需要合规认定时应咨询专业责任人并以当前标准原文为准。
| 检查方式 | 擅长发现 | 容易遗漏 |
|---|---|---|
| 自动扫描 | 缺少名称、部分对比度、结构规则 | 任务是否可理解、动态焦点、错误恢复 |
| 代码审查 | 语义、状态属性、事件与焦点实现 | 真实辅助技术组合差异 |
| 键盘测试 | 顺序、陷阱、可见焦点和操作完整性 | 读屏名称与语义 |
| 屏幕阅读器 | 名称、角色、状态、阅读顺序 | 视觉层级与部分认知负担 |
| 用户任务测试 | 综合障碍与恢复成本 | 无法覆盖所有技术规则 |
七步检查流程
Section titled “七步检查流程”- 定义范围和环境:列页面、关键任务、浏览器、设备、输入方式与辅助技术组合。
- 设计稿预检:检查信息层级、触控目标、颜色依赖、动效、文案和所有界面状态。
- 自动化扫描:保存工具版本和结果,将报告作为线索而非合规证明。
- 键盘走查:从页面开头完成任务,检查跳转、顺序、焦点可见、弹层和退出方式。
- 语义与读屏测试:确认标题、地标、控件名称、状态变化、错误关联和动态通知。
- 缩放与重排:放大文字和页面,检查内容是否遮挡、截断或要求双向滚动。
- 问题分级与回归:按任务阻断和影响记录证据,修复后用同一环境复测。
假设示例:邀请成员对话框
Section titled “假设示例:邀请成员对话框”以下检查结果为教学假设,不代表任何真实页面已通过或未通过无障碍标准。
界面:打开对话框,填写邮箱,选择角色,发送邀请。已知实现说明:关闭按钮只有图标;错误信息显示在字段下方;发送后出现状态提示。要求:输出需要验证的问题,不推断实际 DOM 或读屏表现。| 环节 | 需要验证 | 证据方式 | 不能从说明推断 |
|---|---|---|---|
| 打开 | 焦点是否进入对话框,背景是否不可操作 | 键盘与辅助技术实测 | 焦点管理已经正确 |
| 关闭 | 图标按钮是否有可感知名称,可用 Esc 退出 | 语义树、键盘测试 | 图标外观等于名称 |
| 填写 | 标签是否程序化关联,错误是否被读出 | DOM 与读屏测试 | 字段下有文字就一定关联 |
| 选择角色 | 角色说明、选中状态和操作方式 | 键盘、读屏、触控 | 自定义控件符合原生行为 |
| 发送 | 加载状态、重复提交保护和结果通知 | 状态变化与读屏实测 | 视觉提示会自动播报 |
问题记录模板
Section titled “问题记录模板”任务与步骤:环境与工具版本:实际行为:预期行为:影响与是否可恢复:截图、录屏、DOM 或读屏证据:修复责任人与回归状态:决策与复核表
Section titled “决策与复核表”| 检查项 | 复核问题 | 通过信号 |
|---|---|---|
| 键盘 | 所有动作无需指针设备可完成吗? | 无陷阱,焦点顺序和样式清楚 |
| 语义 | 控件名称、角色、值和状态正确吗? | 语义与视觉目的一致 |
| 视觉 | 文字、对比、重排和颜色依赖怎样? | 放大后不丢内容与功能 |
| 动态 | 加载、错误、成功怎样被感知? | 状态通知适时且不过度 |
| 回归 | 修复是否在目标环境复测? | 有证据和明确状态 |
- 把自动扫描“零错误”理解为完整合规。
- 设计稿只标默认状态,没有键盘焦点、错误和加载状态。
- 用占位符代替持久标签,输入后失去提示。
- 自定义控件只响应鼠标点击,没有等价键盘操作。
- 修复视觉对比后不复测悬停、禁用、焦点和高对比环境。
AI 能判断页面是否符合 WCAG 吗?
Section titled “AI 能判断页面是否符合 WCAG 吗?”不能单独判断。它可以解释规则和整理线索,但需要当前标准、真实代码、辅助技术测试和专业复核。
只检查颜色对比够吗?
Section titled “只检查颜色对比够吗?”不够。还要检查键盘、语义、名称、状态、缩放、动效、表单、错误恢复和内容理解。
设计阶段没有代码怎样检查?
Section titled “设计阶段没有代码怎样检查?”可以检查层级、颜色、内容、目标尺寸和状态,并标注实现验收要求;语义与焦点必须留到实现阶段实测。
无障碍问题怎样排优先级?
Section titled “无障碍问题怎样排优先级?”优先处理阻止任务、无替代路径、影响范围广或涉及高风险操作的问题,同时记录标准要求与修复依赖。
无障碍质量必须在真实界面、输入方式和辅助技术中验证。AI 能整理规则与证据,不能把截图分析或自动扫描包装成合规结论。