|
|
# 综合网站无障碍审计
|
|
|
|
|
|
## 说明
|
|
|
|
|
|
在本作业中，你将对一个真实网站进行专业级别的无障碍审计，应用你所学的原则和技术。这一实操经验将加深你对无障碍障碍及解决方案的理解。
|
|
|
|
|
|
选择一个看起来存在无障碍问题的网站——这比分析已经完美的网站能带来更多学习机会。合适的候选包括较旧的网站、复杂的网络应用或含有丰富多媒体内容的网站。
|
|
|
|
|
|
### 第一阶段：战略性手动评估
|
|
|
|
|
|
在使用自动化工具之前，先进行全面的手动评估。这种以人为中心的方法常常能发现工具未能检测到的问题，并帮助你理解真实的用户体验。
|
|
|
|
|
|
**🔍 关键评估标准：**
|
|
|
|
|
|
**导航与结构：**
|
|
|
- 能否仅用键盘（Tab、Shift+Tab、Enter、Space、方向键）导航整个网站？
|
|
|
- 所有交互元素上是否有明显的焦点指示？
|
|
|
- 标题结构（H1-H6）是否创建了逻辑清晰的内容大纲？
|
|
|
- 是否有跳转主内容的跳过链接？
|
|
|
|
|
|
**视觉无障碍：**
|
|
|
- 网站整体是否有足够的颜色对比度（普通文本最低4.5:1）？
|
|
|
- 网站是否仅依靠颜色传达重要信息？
|
|
|
- 所有图像是否有适当的替代文本？
|
|
|
- 放大至200%时布局是否仍然可用？
|
|
|
|
|
|
**内容与交流：**
|
|
|
- 是否存在“点击这里”等模糊的链接文本？
|
|
|
- 无需视觉提示是否能理解内容和功能？
|
|
|
- 表单字段是否正确标注和分组？
|
|
|
- 错误信息是否清晰且有帮助？
|
|
|
|
|
|
**交互元素：**
|
|
|
- 所有按钮和表单控件是否支持仅用键盘操作？
|
|
|
- 动态内容变更是否向屏幕阅读器宣布？
|
|
|
- 模态对话框和复杂控件是否遵循正确的无障碍模式？
|
|
|
|
|
|
📝 **用具体示例、截图和页面 URL 记录你的发现**，注意问题和良好实践。
|
|
|
|
|
|
### 第二阶段：全面自动化测试
|
|
|
|
|
|
现在使用行业标准的无障碍测试工具验证和扩展手动发现。每种工具具有不同优势，结合多工具使用可达到全面覆盖。
|
|
|
|
|
|
**🛠️ 必用测试工具：**
|
|
|
|
|
|
1. **Lighthouse 无障碍审计**（内置于 Chrome/Edge 开发者工具）
|
|
|
- 在多个页面运行审计
|
|
|
- 关注具体指标和建议
|
|
|
- 记录无障碍得分和具体违规项
|
|
|
|
|
|
2. **axe DevTools**（浏览器扩展 - 行业标准）
|
|
|
- 比 Lighthouse 检测更详细的问题
|
|
|
- 提供具体代码示例解决方案
|
|
|
- 针对 WCAG 2.1 标准测试
|
|
|
|
|
|
3. **WAVE 无障碍评估器**（浏览器扩展）
|
|
|
- 可视化无障碍特征表示
|
|
|
- 突出错误和正面特征
|
|
|
- 非常适合理解页面结构
|
|
|
|
|
|
4. **颜色对比分析工具**
|
|
|
- WebAIM Contrast Checker 用于具体配色对检测
|
|
|
- 浏览器扩展用于页面全局分析
|
|
|
- 测试同时符合 WCAG AA 和 AAA 标准
|
|
|
|
|
|
**🎧 真实辅助技术测试：**
|
|
|
- **屏幕阅读器测试**：使用 NVDA（Windows）、VoiceOver（Mac）或 TalkBack（Android）
|
|
|
- **仅键盘导航**：拔掉鼠标，使用键盘导航全站
|
|
|
- **放大测试**：在 200% 和 400% 缩放级别测试功能
|
|
|
- **语音控制测试**：如可用，尝试语音导航工具
|
|
|
|
|
|
**📊 整理结果**，创建总表包括：
|
|
|
- 问题描述和位置
|
|
|
- 严重性级别（关键/高/中/低）
|
|
|
- 违反的 WCAG 成功标准
|
|
|
- 发现问题的工具
|
|
|
- 截图和证据
|
|
|
|
|
|
### 第三阶段：详细发现报告
|
|
|
|
|
|
编写专业的无障碍审计报告，展示你对技术问题及其对用户影响的理解。
|
|
|
|
|
|
**📋 必含报告部分：**
|
|
|
|
|
|
1. **执行摘要**（1 页）
|
|
|
- 网站 URL 和简要介绍
|
|
|
- 整体无障碍成熟度水平
|
|
|
- 3 个最关键问题
|
|
|
- 对残障用户的预估影响
|
|
|
|
|
|
2. **方法论**（½ 页）
|
|
|
- 测试方法和使用的工具
|
|
|
- 评估的页面及设备/浏览器组合
|
|
|
- 遵循的标准（WCAG 2.1 AA）
|
|
|
|
|
|
3. **详细发现**（2-3 页）
|
|
|
- 按 WCAG 原则分类的问题（可感知、可操作、可理解、稳健）
|
|
|
- 包含截图和具体示例
|
|
|
- 记录发现的正面无障碍特征
|
|
|
- 与自动化工具结果交叉引用
|
|
|
|
|
|
4. **用户影响评估**（1 页）
|
|
|
- 识别的问题如何影响不同残障用户
|
|
|
- 描述真实用户体验场景
|
|
|
- 商业影响（法律风险、搜索引擎优化、用户基数拓展）
|
|
|
|
|
|
**📸 证据收集：**
|
|
|
- 无障碍违规的截图
|
|
|
- 问题用户流程的屏幕录制
|
|
|
- 工具报告（保存为 PDF）
|
|
|
- 展示问题的代码示例
|
|
|
|
|
|
### 第四阶段：专业整改计划
|
|
|
|
|
|
制定战略性、优先级排序的无障碍问题修复方案，展示你像专业开发人员一样考虑实际业务限制的能力。
|
|
|
|
|
|
**🎯 制作详细改进建议（至少10项）：**
|
|
|
|
|
|
**针对每个问题，提供：**
|
|
|
|
|
|
- **问题描述**：清楚说明问题及其危害
|
|
|
- **WCAG 参考**：具体违反的成功标准（如“2.4.4 链接用途（上下文中）- A 级”）
|
|
|
- **用户影响**：如何影响不同残障用户
|
|
|
- **解决方案**：具体代码更改、设计调整或流程改进
|
|
|
- **优先级**：关键（阻断基本使用）/ 高（显著障碍）/ 中（可用性问题）/ 低（改进）
|
|
|
- **实施难度**：时间/复杂度估计（快速赢得 / 中等投入 / 重大重构）
|
|
|
- **测试验证**：如何验证修复有效
|
|
|
|
|
|
**示例改进条目：**
|
|
|
|
|
|
```
|
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
|
Priority: High (major navigation barrier)
|
|
|
Effort: Low (30 minutes to update content)
|
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
|
```
|
|
|
|
|
|
**📈 战略实施阶段：**
|
|
|
|
|
|
- **第1阶段（0-2周）**：阻碍基本功能的关键问题
|
|
|
- **第2阶段（1-2个月）**：改善用户体验的高优先级改进
|
|
|
- **第3阶段（3-6个月）**：中优先级的增强和流程改良
|
|
|
- **第4阶段（持续进行）**：持续监控和改进
|
|
|
|
|
|
## 评估标准
|
|
|
|
|
|
你的无障碍审计将根据技术准确性和专业呈现进行评估：
|
|
|
|
|
|
| 标准 | 优秀（90-100%） | 良好（80-89%） | 满意（70-79%） | 需改进（<70%） |
|
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
|
| **手动测试深度** | 覆盖所有 POUR 原则，且详细观察和用户场景 | 覆盖大部分无障碍领域，发现明确，部分用户影响分析 | 覆盖关键领域，观察适当 | 测试有限，观察表面，用户影响考虑不足 |
|
|
|
| **工具使用与分析** | 有效使用所有工具，交叉验证，清晰证据，分析工具限制 | 使用大多数工具，有良好文档，部分交叉验证和证据 | 使用必需工具，基本文档和一定证据 | 工具使用有限，文档差，证据不足 |
|
|
|
| **问题识别与分类** | 识别15+具体问题，准确分级，表现出深入理解 | 识别10-14问题，覆盖大多数WCAG原则，分类良好 | 识别7-9问题，基本覆盖，分类一般 | 识别<7问题，范围有限，分类差 |
|
|
|
| **解决方案质量与可行性** | 10+详实、可执行方案，准确WCAG引用，合理实施周期，验证方法 | 8-9方案，引用大多准确，实施细节好 | 6-7基础方案，有部分细节，方案现实 | <6方案、细节不足、不可行 |
|
|
|
| **专业沟通** | 报告结构优秀，文字清晰，含执行摘要，技术语言恰当，符合商务规范 | 组织良好，文字质量好，包含大多数必需部分，语气合适 | 组织合理，文字可接受，包含基本部分 | 组织混乱，表述不清，缺少关键部分 |
|
|
|
| **实际应用性** | 展示业务影响、法律考量、用户多样性和实践挑战的理解 | 展示对实际应用和部分业务背景的良好理解 | 基础了解实际应用 | 对实际应用的联系有限 |
|
|
|
|
|
|
## 进阶挑战选项
|
|
|
|
|
|
**🚀 对想挑战更高水平的学生：**
|
|
|
|
|
|
- **对比分析**：审计 2-3 个竞品网站，比较无障碍成熟度
|
|
|
- **移动端无障碍聚焦**：用 Android TalkBack 或 iOS VoiceOver 深入探究移动端无障碍问题
|
|
|
- **国际视角**：研究应用不同国家无障碍标准（EN 301 549、Section 508、ADA）
|
|
|
- **无障碍声明审查**：根据你的发现评估网站现有无障碍声明（如有）
|
|
|
|
|
|
## 交付物
|
|
|
|
|
|
提交一份综合无障碍审计报告，展示专业分析与可行整改方案：
|
|
|
|
|
|
**📄 最终报告要求：**
|
|
|
|
|
|
1. **执行摘要**（1页）
|
|
|
- 网站概况与无障碍成熟度评估
|
|
|
- 关键发现及商业影响汇总
|
|
|
- 优先推荐措施
|
|
|
|
|
|
2. **方法论与范围**（1页）
|
|
|
- 测试方法、工具和评估标准
|
|
|
- 评估页面/章节及限制
|
|
|
- 遵循标准体系（WCAG 2.1 AA）
|
|
|
|
|
|
3. **详细发现报告**（3-4页）
|
|
|
- 手动测试观察和用户场景
|
|
|
- 自动化工具结果与交叉验证
|
|
|
- 按 WCAG 原则组织的问题及证据
|
|
|
- 识别的正面无障碍特征
|
|
|
|
|
|
4. **战略整改计划**（3-4页）
|
|
|
- 优先级改进建议（至少10项）
|
|
|
- 实施时间表及工作量估算
|
|
|
- 成功指标和验证方法
|
|
|
- 长期无障碍维护策略
|
|
|
|
|
|
5. **支持证据**（附录）
|
|
|
- 无障碍违规和测试工具截图
|
|
|
- 展示问题及解决方案的代码示例
|
|
|
- 工具报告和审计摘要
|
|
|
- 屏幕阅读器测试笔记或录制
|
|
|
|
|
|
**📊 格式要求：**
|
|
|
- **文档格式**：PDF（专业呈现）
|
|
|
- **字数**：2500-3500 字（不含附录和截图）
|
|
|
- **视觉元素**：贯穿包含截图、图表和示例
|
|
|
- **引用**：适当引用 WCAG 指南和无障碍资源
|
|
|
|
|
|
**💡 卓越建议：**
|
|
|
- 使用专业报告格式，标题和样式统一
|
|
|
- 包含目录便于导航
|
|
|
- 技术准确与清晰商务语言兼顾
|
|
|
- 展示技术实现和用户影响的理解
|
|
|
|
|
|
## 学习收益
|
|
|
|
|
|
完成本综合无障碍审计后，你将掌握核心专业技能：
|
|
|
|
|
|
**🎯 技术能力：**
|
|
|
- **无障碍测试精通**：熟练应用行业标准手动和自动测试方法
|
|
|
- **WCAG 应用**：实践下应用 Web 内容无障碍指南经验
|
|
|
- **辅助技术理解**：亲手体验屏幕阅读器和键盘导航
|
|
|
- **问题-方案映射**：能识别无障碍障碍并制定具体可行的整改策略
|
|
|
|
|
|
**💼 职业技能：**
|
|
|
- **技术沟通**：为多元利益相关者撰写专业无障碍报告经验
|
|
|
- **战略规划**：基于用户影响和实施可行性优先排序改进
|
|
|
- **质量保证**：理解无障碍测试在开发生命周期中的角色
|
|
|
- **风险评估**：认识无障碍合规的法律、商业和伦理意义
|
|
|
|
|
|
**🌍 包容性设计心态：**
|
|
|
- **用户共情**：深入理解多样用户需求及辅助技术交互
|
|
|
- **通用设计原则**：认知无障碍设计惠及所有用户，不仅限残障
|
|
|
- **持续改进**：建立无障碍持续评估和优化框架
|
|
|
- **倡导能力**：自信推动未来项目和团队无障碍最佳实践
|
|
|
|
|
|
**🚀 职业准备：**
|
|
|
本作业模拟真实无障碍咨询项目，为你提供作品集级经验，展现：
|
|
|
- 系统性问题解决方法
|
|
|
- 技术细节与商业影响兼顾
|
|
|
- 复杂技术概念的清晰沟通
|
|
|
- 网页开发法律与伦理责任理解
|
|
|
|
|
|
完成后，你将能有效参与任何网页开发岗位的无障碍工作，并在职业生涯中倡导包容性设计实践。
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**免责声明**：
|
|
|
本文件由 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻译。尽管我们努力保证准确性，但请注意，自动翻译可能存在错误或不准确之处。原始文件的母语版本应被视为权威来源。对于重要信息，建议使用专业人工翻译。对于因使用此翻译而产生的任何误解或误释，我们不承担任何责任。
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
