七、无障碍设计
(一)无障碍概述
目标用户
- 视障用户。
- 听障用户。
- 老年用户。
- 肢体障碍用户。
设计原则
- 可感知。
- 可操作。
- 可理解。
- 健壮性。
法规要求
- 符合《无障碍环境建设条例》。
- 满足 WCAG 2.1 AA 标准。
(二)视觉无障碍
色彩对比度
| 元素 | 对比度要求 |
|---|---|
| 普通文字 | 4.5:1 |
| 大文字 | 3:1 |
| 图标 | 3:1 |
字体适配
- 支持字体缩放(200%)。
- 保持文字清晰。
- 避免使用图片文字。
屏幕阅读器
- 提供 alt 文本。
- 使用正确的语义化标签。
- 做好焦点管理。
(三)交互无障碍
键盘导航
- 所有功能可通过键盘操作。
- 清晰的焦点指示。
- 合理的 Tab 顺序。
触摸适配
- 增大点击区域。
- 支持手势替代。
- 避免依赖精确操作。
时间控制
- 提供充足的操作时间。
- 可暂停或延长时间限制。
- 避免自动刷新干扰。
(四)设计自检表
提交审核前请检查以下项目是否符合规范。
视觉
| 条目 | 说明 | 要求 |
|---|---|---|
| 色彩对比度 | 文字与背景对比度满足规范 | 必选 |
| 色彩区分 | 需区分的颜色有足够差异 | 必选 |
| 字体大小 | 最小字号不小于12px | 必选 |
| 图标识别 | 图标含义清晰可辨 | 必选 |
交互
| 条目 | 说明 | 要求 |
|---|---|---|
| 键盘操作 | 所有功能可通过键盘访问 | 必选 |
| 焦点管理 | 焦点顺序合理、可见 | 必选 |
| 错误提示 | 错误信息清晰、可恢复 | 必选 |
| 操作反馈 | 操作后有明确反馈 | 必选 |
内容
| 条目 | 说明 | 要求 |
|---|---|---|
| 替代文本 | 图片有 alt 描述 | 必选 |
| 表单标签 | 表单元素有关联标签 | 必选 |
| 页面标题 | 每个页面有唯一标题 | 必选 |
| 语言标识 | 页面有语言属性 | 必选 |
推荐项
| 条目 | 说明 | 要求 |
|---|---|---|
| 简化操作 | 减少不必要的操作步骤 | 推荐 |
| 智能提示 | 提供输入建议和自动完成 | 推荐 |
| 高对比模式 | 支持高对比度主题 | 推荐 |
