# 专业无障碍访问审查框架
## 六层无障碍审查金字塔
```
┌─────────────────────────────────────────────────────────┐
│ 第六层：社会影响层（包容性与合规） │
│ • 法律合规性 │
│ • 社会责任履行 │
│ • 品牌包容性形象 │
├─────────────────────────────────────────────────────────┤
│ 第五层：技术实现层（开发可行性） │
│ • 无障碍API实现 │
│ • 辅助技术兼容性 │
│ • 测试与验证体系 │
├─────────────────────────────────────────────────────────┤
│ 第四层：用户体验层（功能完整性） │
│ • 多样化用户需求覆盖 │
│ • 可预测与可控性 │
│ • 容错与恢复机制 │
├─────────────────────────────────────────────────────────┤
│ 第三层：感知认知层（信息可获取性） │
│ • 信息多通道传达 │
│ • 认知负荷控制 │
│ • 学习与记忆支持 │
├─────────────────────────────────────────────────────────┤
│ 第二层：技术合规层（标准符合性） │
│ • WCAG 2.1标准执行 │
│ • 平台规范遵循 │
│ • 行业最佳实践 │
├─────────────────────────────────────────────────────────┤
│ 第一层：基础保障层（基础必查） │
│ • 键盘导航完整性 │
│ • 屏幕阅读器支持 │
│ • 对比度与可读性 │
└─────────────────────────────────────────────────────────┘
```
---
## 第一层：基础保障层（基础必查）
### 1.1 键盘导航完整性检查
**WCAG 2.1.1 键盘要求：**
- 所有功能必须能通过键盘接口操作，无需特定时间完成
**键盘导航核心检查项：**
- [ ] 所有可交互元素可通过Tab键访问
- [ ] Tab顺序符合视觉顺序和逻辑顺序
- [ ] 焦点指示器清晰可见（对比度≥3:1）
- [ ] 支持常用快捷键（Enter、Space、Esc、箭头键）
- [ ] 提供"跳过导航"链接（Skip to main content）
- [ ] 模态对话框可键盘关闭（Esc键）
- [ ] 下拉菜单可通过键盘导航和选择
**焦点管理要求：**
- [ ] 焦点不丢失（不会因交互而失去焦点）
- [ ] 焦点不陷入陷阱（用户能移出所有组件）
- [ ] 焦点顺序逻辑合理（从左到右、从上到下）
- [ ] 动态内容获得焦点时通知用户
### 1.2 屏幕阅读器支持检查
**WCAG 4.1.2 名称、角色、值要求：**
- 对于所有用户界面组件，名称和角色可以通过编程方式确定
**屏幕阅读器核心检查项：**
- [ ] 所有非文本内容有替代文本（alt、aria-label、aria-labelledby）
- [ ] 表单字段有标签（label、aria-label、aria-labelledby）
- [ ] 按钮有描述性文本（避免"点击这里"、"更多"等）
- [ ] 使用语义化HTML元素（button、nav、main、article等）
- [ ] 状态变化通过ARIA属性通知（aria-live、aria-atomic、aria-relevant）
- [ ] 错误信息可通过屏幕阅读器访问
- [ ] 复杂组件有ARIA角色和属性描述
**ARIA使用原则：**
- [ ] 优先使用原生HTML语义元素
- [ ] ARIA仅用于增强现有语义
- [ ] ARIA属性值有效且符合规范
- [ ] 避免ARIA属性冲突
### 1.3 对比度与可读性检查
**WCAG对比度要求：**
- **正常文本：** ≥4.5:1（AA级），≥7:1（AAA级）
- **大文本：** ≥3:1（AA级），≥4.5:1（AAA级）
- **非文本对比度：** ≥3:1（UI组件、图标、图形）
**可读性检查清单：**
- [ ] 所有文本内容满足对比度要求
- [ ] 字体大小可调整至200%不失功能
- [ ] 行高至少1.5倍字号
- [ ] 段落间距至少2倍行高
- [ ] 避免纯装饰性文本
- [ ] 重要信息不单独依赖颜色传达
- [ ] 链接文本有视觉区分（下划线或明显颜色差异）
---
## 第二层：技术合规层（标准符合性）
### 2.1 WCAG 2.1 AA级标准检查
**四大原则检查清单：**
#### 可感知性（Perceivable）
- [ ] **1.1.1 非文本内容：** 所有非文本内容都有文本替代
- [ ] **1.2.1 纯音频和纯视频：** 提供替代方案
- [ ] **1.2.2 字幕：** 同步音频内容提供字幕
- [ ] **1.2.3 音频描述：** 视频提供音频描述
- [ ] **1.3.1 信息和关系：** 信息、结构和关系可通过编程确定
- [ ] **1.3.2 有意义的顺序：** 阅读和导航顺序合理
- [ ] **1.4.1 颜色使用：** 颜色不单独传达信息
- [ ] **1.4.3 对比度（最小）：** 文本对比度4.5:1，大文本3:1
- [ ] **1.4.4 文字大小调整：** 文字可放大到200%
- [ ] **1.4.10 重排：** 支持320px宽度的垂直滚动
#### 可操作性（Operable）
- [ ] **2.1.1 键盘：** 所有功能可通过键盘操作
- [ ] **2.1.2 无键盘陷阱：** 焦点不会陷入组件中
- [ ] **2.2.1 可调节时间：** 时间限制可调整或关闭
- [ ] **2.2.2 暂停、停止、隐藏：** 移动、闪烁、滚动内容可控制
- [ ] **2.3.1 三次闪烁以下：** 内容不包含每秒闪动3次以上的区域
- [ ] **2.4.1 跳过块：** 提供跳过重复内容的机制
- [ ] **2.4.2 页面标题：** 页面有描述性标题
- [ ] **2.4.3 焦点顺序：** 导航顺序合理
- [ ] **2.4.4 链接目的：** 链接目的从链接文本可理解
- [ ] **2.4.6 标题和标签：** 标题和标签描述主题或目的
#### 可理解性（Understandable）
- [ ] **3.1.1 页面语言：** 页面语言可通过编程确定
- [ ] **3.2.1 聚焦时：** 聚焦不自动改变上下文
- [ ] **3.2.2 输入时：** 输入不自动改变上下文
- [ ] **3.2.3 一致性导航：** 导航机制在整个网站一致
- [ ] **3.2.4 一致性标识：** 相同功能的组件有一致标识
- [ ] **3.3.1 错误识别：** 错误可识别且描述错误
- [ ] **3.3.2 标签或说明：** 表单有标签或说明
- [ ] **3.3.3 错误建议：** 错误时有纠正建议
#### 健壮性（Robust）
- [ ] **4.1.1 解析：** 标记语言元素有完整开始和结束标签
- [ ] **4.1.2 名称、角色、值：** 所有组件名称、角色、值可通过编程确定
### 2.2 平台规范遵循检查
**不同平台无障碍规范：**
- **iOS VoiceOver：** 支持动态类型、标签、提示、特性
- **Android TalkBack：** 支持内容描述、状态描述、无障碍节点
- **Windows Narrator：** 支持UI自动化、辅助技术API
- **Web ARIA：** W3C无障碍丰富互联网应用规范
**平台适配检查清单：**
- [ ] 遵循目标平台的无障碍编程接口
- [ ] 支持平台特定的辅助技术
- [ ] 平台特有功能的无障碍实现
- [ ] 跨平台无障碍体验一致性
### 2.3 行业最佳实践检查
**无障碍设计模式：**
- [ ] 使用语义化HTML5元素
- [ ] 实现渐进增强（基础功能无需JavaScript）
- [ ] 支持高对比度模式
- [ ] 提供无障碍主题选项
- [ ] 遵循无障碍组件库模式
**移动端最佳实践：**
- [ ] 触摸目标尺寸≥44×44px
- [ ] 手势操作有替代方案
- [ ] 支持摇动撤销
- [ ] 支持系统字体大小设置
- [ ] 支持减少动画设置（prefers-reduced-motion）
---
## 第三层：感知认知层（信息可获取性）
### 3.1 信息多通道传达
**多感官信息传达原则：**
- **视觉信息：** 同时提供文本描述
- **音频信息：** 同时提供文本字幕或文字稿
- **动作信息：** 同时提供静态替代
- **时间限制信息：** 提供控制或替代方案
**检查清单：**
- [ ] 图标和图形有文字标签
- [ ] 图表数据有表格或文本摘要
- [ ] 视频内容有字幕和文字稿
- [ ] 音频内容有文字稿
- [ ] 动画和动效有静态替代或可关闭
- [ ] 状态变化通过多感官反馈（视觉+听觉+触觉）
- [ ] 复杂概念通过多种方式解释
### 3.2 认知负荷控制
**认知无障碍设计原则：**
- **简洁性：** 避免信息过载
- **一致性：** 相似功能相似表现
- **可预测性：** 用户能预测交互结果
- **容错性：** 支持错误恢复
**检查清单：**
- [ ] 界面复杂度与用户能力匹配
- [ ] 信息分块组织，每块5-9个信息点
- [ ] 提供明确的进度指示
- [ ] 复杂任务分步骤引导
- [ ] 提供上下文帮助
- [ ] 避免技术术语或提供解释
- [ ] 支持个性化难度设置
### 3.3 学习与记忆支持
**学习支持设计：**
- **渐进披露：** 复杂功能逐步介绍
- **即时帮助：** 需要时提供上下文帮助
- **错误预防：** 设计避免常见错误
- **反馈明确：** 操作结果清晰反馈
**记忆支持设计：**
- [ ] 重要信息有永久可见提示
- [ ] 支持书签和收藏功能
- [ ] 提供搜索和历史记录
- [ ] 使用熟悉的图标和标签
- [ ] 支持自定义快捷方式
- [ ] 提供任务清单和提醒
**认知障碍支持：**
- [ ] 支持注意力障碍（减少干扰，明确焦点）
- [ ] 支持阅读障碍（文本转语音，字体调整）
- [ ] 支持记忆障碍（任务提示，进度保存）
- [ ] 支持执行功能障碍（简化步骤，明确目标）
---
## 第四层：用户体验层（功能完整性）
### 4.1 多样化用户需求覆盖
**能力多样性支持：**
| 能力类型 | 支持需求 | 实现方案 |
|----------|----------|----------|
| **视觉障碍** | 屏幕阅读器支持 | ARIA标签、语义化HTML、键盘导航 |
| **听力障碍** | 视觉替代 | 字幕、文字稿、视觉提示 |
| **运动障碍** | 多种输入方式 | 键盘、语音、眼动追踪、开关控制 |
| **认知障碍** | 简化界面 | 清晰布局、简单语言、进度提示 |
| **语言障碍** | 多语言支持 | 翻译、简单语言版本、图片辅助 |
**检查清单：**
- [ ] 支持多种输入方式（键盘、鼠标、触摸、语音、眼动）
- [ ] 支持多种输出方式（视觉、听觉、触觉）
- [ ] 提供多种语言选项
- [ ] 提供简单语言版本
- [ ] 支持辅助技术个性化配置
### 4.2 可预测与可控性
**可预测性设计：**
- [ ] 界面行为符合用户预期
- [ ] 状态变化有明确预示
- [ ] 错误可预防和预测
- [ ] 操作结果可预期
**可控性设计：**
- [ ] 用户可控制时间限制（可调整或关闭）
- [ ] 用户可控制自动播放内容（可暂停、停止、隐藏）
- [ ] 用户可控制动画和动效（可减少或关闭）
- [ ] 用户可控制布局变化（可调整或固定）
- [ ] 用户可控制数据更新频率（可调整或手动）
**自主性设计：**
- [ ] 用户可选择完成任务的方式
- [ ] 用户可自定义界面设置
- [ ] 用户可保存个性化配置
- [ ] 用户可导出和导入设置
### 4.3 容错与恢复机制
**错误预防设计：**
- [ ] 危险操作需要确认
- [ ] 表单输入有即时验证
- [ ] 提供撤销和重做功能
- [ ] 自动保存草稿和进度
**错误处理设计：**
- [ ] 错误信息清晰描述问题
- [ ] 错误信息提供解决建议
- [ ] 错误可恢复（返回上一步）
- [ ] 支持错误报告和反馈
**灾难恢复设计：**
- [ ] 支持数据备份和恢复
- [ ] 网络中断时可继续离线工作
- [ ] 崩溃后可恢复之前状态
- [ ] 提供紧急联系方式
---
## 第五层：技术实现层（开发可行性）
### 5.1 无障碍API实现
**Web无障碍API标准：**
- **ARIA 1.2：** 丰富互联网应用无障碍规范
- **WAI-ARIA Authoring Practices：** ARIA使用最佳实践
- **Core Accessibility API Mappings：** 平台映射规范
**检查清单：**
- [ ] 正确使用HTML5语义元素
- [ ] ARIA属性使用符合规范
- [ ] 无障碍树结构正确
- [ ] 焦点管理逻辑清晰
- [ ] 状态和属性动态更新
- [ ] 支持无障碍事件监听
- [ ] 性能不影响无障碍功能
**代码质量检查：**
```html
用户名应为3-20个字符
提交
点击这里查看更多
```
### 5.2 辅助技术兼容性测试
**辅助技术测试矩阵：**
| 辅助技术 | 测试要点 | 测试工具 |
|----------|----------|----------|
| **屏幕阅读器** | 导航、阅读、交互 | NVDA、JAWS、VoiceOver、TalkBack |
| **放大软件** | 布局、可读性、导航 | ZoomText、系统放大镜 |
| **语音识别** | 命令识别、导航控制 | Dragon NaturallySpeaking、Windows语音识别 |
| **开关控制** | 扫描模式、选择控制 | Switch Control、单开关扫描 |
| **眼动追踪** | 注视控制、选择精度 | Tobii Eye Tracking |
**测试流程：**
1. **功能测试：** 所有功能通过辅助技术可操作
2. **导航测试：** 逻辑导航顺序，焦点管理
3. **内容测试：** 所有内容可访问和理解
4. **状态测试：** 状态变化可感知
5. **性能测试：** 辅助技术下性能可接受
### 5.3 测试与验证体系
**自动化测试工具：**
- **axe-core：** 开源无障碍测试引擎
- **Lighthouse：** Google无障碍审计工具
- **Pa11y：** 命令行无障碍测试工具
- **WAVE：** Web无障碍评估工具
- **Accessibility Insights：** Microsoft无障碍测试工具
**手动测试清单：**
- [ ] 仅用键盘完成所有核心任务
- [ ] 使用屏幕阅读器浏览页面
- [ ] 高对比度模式下检查可读性
- [ ] 关闭CSS和JavaScript检查基础功能
- [ ] 模拟慢速网络和低端设备
**用户测试：**
- [ ] 邀请残障用户参与测试
- [ ] 收集无障碍使用反馈
- [ ] 观察辅助技术使用情况
- [ ] 测试多样化用户场景
---
## 第六层：社会影响层（包容性与合规）
### 6.1 法律合规性检查
**国际无障碍法律标准：**
- **美国：** ADA（美国残疾人法案）、Section 508
- **欧盟：** EN 301 549标准、Web Accessibility Directive
- **加拿大：** AODA（无障碍法案）
- **澳大利亚：** Disability Discrimination Act
- **中国：** 无障碍环境建设条例
**合规性检查清单：**
- [ ] 了解目标市场的无障碍法律要求
- [ ] 建立合规性验证流程
- [ ] 定期进行合规性审计
- [ ] 保留合规性文档记录
- [ ] 制定合规性改进计划
**合规风险缓解：**
- [ ] 法律风险识别和评估
- [ ] 合规性差距分析
- [ ] 改进优先级排序
- [ ] 合规性进展跟踪
- [ ] 法律顾问定期审查
### 6.2 社会责任履行
**企业社会责任框架：**
- **联合国可持续发展目标：** 目标10 - 减少不平等
- **ISO 26000：** 社会责任指南
- **全球报告倡议：** 可持续发展报告
**社会责任实践：**
- [ ] 将无障碍纳入企业价值观
- [ ] 设立无障碍委员会或专员
- [ ] 员工无障碍意识培训
- [ ] 残障人士就业支持
- [ ] 无障碍产品和服务承诺
- [ ] 无障碍进展公开报告
**包容性文化建设：**
- [ ] 消除产品和服务的访问障碍
- [ ] 促进残障人士社会参与
- [ ] 支持无障碍技术创新
- [ ] 建立包容性合作伙伴关系
### 6.3 品牌包容性形象
**包容性品牌价值：**
- [ ] 品牌传达包容性价值观
- [ ] 营销材料包含多样化用户
- [ ] 客户服务支持无障碍需求
- [ ] 产品设计考虑广泛用户能力
- [ ] 用户反馈渠道包容所有用户
**品牌信任建立：**
- [ ] 透明的无障碍承诺
- [ ] 定期无障碍进展报告
- [ ] 积极的用户问题响应
- [ ] 持续的无障碍改进
- [ ] 无障碍成就认证和展示
**市场竞争优势：**
- [ ] 无障碍作为差异化优势
- [ ] 吸引更广泛的用户群体
- [ ] 提升品牌社会责任形象
- [ ] 减少法律合规风险
- [ ] 创造长期用户忠诚度
---
## 无障碍审查评分标准
### 总分：30分
| 层级 | 权重 | 评分标准 | 优秀(9-10) | 良好(7-8) | 一般(5-6) | 需改进(1-4) |
|------|------|----------|------------|------------|------------|--------------|
| 基础保障 | 6分 | 基础功能 | 全面达标 | 主要项达标 | 部分不达标 | 严重问题 |
| 技术合规 | 6分 | 标准符合 | WCAG AA全面 | 主要标准达标 | 部分不达标 | 严重违规 |
| 感知认知 | 5分 | 信息获取 | 多通道完整 | 基本通道覆盖 | 部分缺失 | 信息障碍 |
| 用户体验 | 5分 | 功能完整 | 多样化覆盖 | 主要需求满足 | 有限支持 | 功能缺失 |
| 技术实现 | 4分 | 开发质量 | 最佳实践 | 可维护实现 | 需优化 | 难以维护 |
| 社会影响 | 4分 | 合规责任 | 领导性实践 | 基本合规 | 有风险 | 不合规 |
### 评级标准
| 总分 | 评级 | 建议 |
|------|------|------|
| 24-30 | 优秀 | 无障碍领导者，保持并分享最佳实践 |
| 18-23 | 良好 | 合规达标，持续优化用户体验 |
| 12-17 | 一般 | 需系统性改进，优先基础功能 |
| 0-11 | 需改进 | 严重无障碍问题，需要重新设计 |
---
## 无障碍审查工具包
### 1. 自动化测试工具
- **axe DevTools：** Chrome/Firefox扩展，自动检测无障碍问题
- **Lighthouse：** Google开发者工具内置无障碍审计
- **WAVE：** Web Accessibility Evaluation Tool
- **Accessibility Insights：** Microsoft开源无障碍测试工具
- **Pa11y：** 命令行无障碍测试工具
### 2. 屏幕阅读器测试工具
- **NVDA：** Windows免费屏幕阅读器
- **JAWS：** Windows商业屏幕阅读器（免费试用版）
- **VoiceOver：** macOS/iOS内置屏幕阅读器
- **TalkBack：** Android内置屏幕阅读器
- **Narrator：** Windows内置屏幕阅读器
### 3. 对比度检查工具
- **WebAIM Contrast Checker：** 在线对比度检查
- **Color Contrast Analyzer：** Chrome扩展
- **Stark：** Figma/Sketch插件
- **a11y：** 命令行对比度检查工具
### 4. 键盘导航测试工具
- **Keyboard Navigation Tester：** Chrome扩展
- **Focus Order Viewer：** 可视化焦点顺序工具
- **Tab Order：** 焦点顺序调试工具
- **NoCoffee：** 视力障碍模拟工具
### 5. 合规性验证工具
- **AChecker：** 在线无障碍检查器
- **TAW：** Web无障碍测试工具
- **SortSite：** 网站质量检查工具
- **Silktide：** 网站合规性监控
### 6. 用户测试工具
- **UserTesting：** 远程用户测试平台
- **Loop11：** 无障碍用户测试
- **UserZoom：** 用户体验研究平台
- **Optimal Workshop：** 信息架构测试工具
---
## 快速无障碍审查清单（5分钟）
### 键盘导航测试（1分钟）
- [ ] 仅用Tab键能否访问所有可交互元素？
- [ ] 焦点指示器是否清晰可见？
- [ ] 能否用键盘完成核心任务？
- [ ] 是否有"跳过导航"链接？
### 屏幕阅读器基础测试（1分钟）
- [ ] 页面标题是否描述性？
- [ ] 图像是否有alt文本？
- [ ] 表单字段是否有标签？
- [ ] 链接文本是否有意义？
### 对比度与可读性检查（1分钟）
- [ ] 主要文字对比度是否≥4.5:1？
- [ ] 重要信息是否不单独依赖颜色？
- [ ] 文字放大200%是否破坏布局？
- [ ] 字体大小是否可调整？
### 内容结构检查（1分钟）
- [ ] 是否使用语义化HTML元素？
- [ ] 标题层级是否正确嵌套？
- [ ] 列表是否使用正确的列表元素？
- [ ] 表格是否有标题和描述？
### 错误处理检查（30秒）
- [ ] 表单错误是否有明确提示？
- [ ] 错误信息是否描述问题和建议？
- [ ] 危险操作是否需要确认？
- [ ] 是否支持撤销功能？
---
## 常见无障碍问题及解决方案
### 问题1：键盘导航不完整
**解决方案：**
1. 添加tabindex到所有可交互元素
2. 确保焦点指示器可见（CSS: outline）
3. 实现逻辑Tab顺序（DOM顺序）
4. 提供跳过重复内容的链接
### 问题2：屏幕阅读器兼容性差
**解决方案：**
1. 使用语义化HTML元素（button、nav、main等）
2. 为图像添加alt属性（装饰性图像alt=""）
3. 为表单添加label或aria-label
4. 动态内容使用aria-live区域
### 问题3：对比度不达标
**解决方案：**
1. 使用对比度检查工具验证
2. 调整文字颜色或背景颜色
3. 确保重要信息有额外视觉提示
4. 提供高对比度主题选项
### 问题4：移动端触摸目标太小
**解决方案：**
1. 确保触摸目标≥44×44px
2. 增加触摸目标间距避免误触
3. 复杂手势有替代方案
4. 支持系统字体大小调整
### 问题5：动态内容无障碍
**解决方案：**
1. 使用ARIA live区域通知变化
2. 确保动态内容可获得焦点
3. 提供加载状态和错误状态
4. 支持辅助技术交互
---
## 附录：无障碍标准参考
### WCAG 2.1 AA级必达标准
1. **1.1.1 非文本内容：** 所有非文本内容有文本替代
2. **1.3.1 信息和关系：** 信息结构可通过编程确定
3. **1.4.3 对比度（最小）：** 文本对比度4.5:1，大文本3:1
4. **2.1.1 键盘：** 所有功能可通过键盘操作
5. **2.4.2 页面标题：** 页面有描述性标题
6. **3.1.1 页面语言：** 页面语言可通过编程确定
7. **4.1.2 名称、角色、值：** 所有组件名称、角色、值可通过编程确定
### ARIA使用最佳实践
1. **原生优先：** 优先使用原生HTML语义元素
2. **角色正确：** ARIA角色反映实际功能
3. **状态完整：** 动态状态通过ARIA属性传达
4. **标签清晰：** ARIA标签简短描述性
5. **测试验证：** 使用屏幕阅读器测试ARIA实现
### 移动端无障碍指南
1. **触摸目标：** ≥44×44px，间距≥8px
2. **手势支持：** 复杂手势有替代方案
3. **方向支持：** 支持横屏和竖屏
4. **系统设置：** 支持字体大小、对比度、减少动画
5. **通知支持：** 支持触觉和音频反馈
### 无障碍法律框架
1. **美国ADA：** 禁止基于残疾的歧视
2. **欧盟Web Directive：** 公共部门网站和APP必须无障碍
3. **Section 508：** 美国联邦机构必须采购无障碍技术
4. **AODA：** 加拿大安大略省无障碍法案
5. **EN 301 549：** 欧盟无障碍产品和服务标准
### 无障碍成熟度模型
1. **基础级：** 满足WCAG AA级标准
2. **良好级：** 超出标准，良好用户体验
3. **优秀级：** 领导性实践，包容性设计
4. **卓越级：** 无障碍创新，行业标杆
---
**文档版本：** v1.0
**最后更新：** 2026年3月17日
**适用对象：** PM、设计师、前端开发、测试人员、合规专员
**使用场景：** 产品评审、设计验收、合规审计、用户测试、竞品分析