万字解析 WCAG 2.1 AA 网页内容无障碍指南（一）：概念需求

欢迎订阅专栏：万字解析 WCAG 2.1 AA 网页内容无障碍指南

概念

WCAG，全称为Web Content Accessibility Guidelines，中文译为网页内容无障碍指南，是一套由国际标准化组织（ISO）发布的指导性技术标准。它的主要目标是创建一个无障碍和包容的数字环境，使每个人都能平等地获取信息和服务。

WCAG包含了视力、听力、运动和智力等多方面的标准条例，并涵盖了台式机、笔记本电脑、平板电脑和移动设备上的Web内容的无障碍问题。遵循这些准则将使更多的残疾人更容易获取网站内容，其中包括失明和弱视、耳聋和听力丧失、运动受限、言语障碍、光敏性和多种残疾组合的残疾人，以及有学习障碍和认知局限的残疾人。

值得注意的是，WCAG并未满足所有类型、程度和多重残疾人群的需要，但它适用于广泛的残疾类别，包括视觉、听觉、身体、语言、认知、学习和神经残疾。此外，这些指南也适合老年人上网，还可让普通用户更好的使用。

第一套指南 WCAG 1.0 于 1999 年 5 月发布，并于 2008 年 12 月更新为 WCAG 2.0，于 2018 年 6 月更新为 WCAG 2.1。目前，最新版本的WCAG 2.1已经成为了开发和更新Web无障碍策略的重要参考依据。WCAG 2.2 计划于 2023 年发布。WCAG 的更新总是向后兼容。因此，如果符合 WCAG 2.1，也必将符合 WCAG 2.0。

目前，一般网站都会以 WCAG 2.1 版本 作为主要参考标准，参考文档：www.w3.org/TR/WCAG21/

而最近刚发布的 WCAG 2.2 版本，在 WCAG 2.1 的基础上新增了9项无障碍要求，也称作为"成功准则"，目前相关资料比较少，参考文档：www.w3.org/TR/WCAG22/

对于 WCAG 指南的每个版本，成功标准有三个等级 ------ A、AA 和 AAA。

• 等级 A：最低要求，比较容易实现
• 等级 AA：一般要求，大多选择此等级
• 等级 AAA：强化要求，比较难实现

这方面还有别的相关学名，比如：

• Accessibility：即指网站可访问性，指无障碍标准，也就是指WCAG。
• 508：指WCAG2.1标准。
• VPAT：跟WCAG都是无障碍标准，但是影响范围不一样，WCAG主要在网站网页方面的标准。

需求 - WCAG 2.1 AA 级标准

需求上，就是做的项目或产品是否需要支持 WCAG2.1，需求主要来自两方面：

1. 项目或产品的客户群体包括残障人士等群体，网站就需要支持可访问性，方便特殊群体访问。
2. 一些国家或地区政府或法律要求，本地部署的网站必须要求WCAG相关具体标准，一般要求AA等级或者部分规则，一旦不达标，可能会面临法律风险。这些国家的客户网站就有需求。

然后大部分情况，需求都是需要支持 WCAG 2.1 AA 级标准。

测试

关于测试，WCAG 主要是服务于Web端网站的，技术方面体现在HTML结构、布局、元素DOM属性设置等，是否符合标准。测试方向主要分为几个方面：

1. 手动测试：用一些静态页面扫描Tool，或者键盘读屏软件，一个个页面扫描、测试。
2. 设计：测试每个页面，每个功能页面设计、布局等是否符合规范。
3. 专业第三方或特殊群体测试：大概意思就是请第三方公司、或者请一些特殊群体，来体验、测试做好的网站，然后会给出report、建议等。

一般项目会使用前两种方式来测试，成本低，可以覆盖大部分标准。

注意：这里只是介绍了几种测试工具及方案，具体测试标准得体现在指南规则里。

AXE DevTool

浏览器插件：官网 | chrome store | crx4chrome | Edge，功能是扫描静态页面，测试方式就是浏览器打开每个页面，然后单个页面扫描。

1. 只扫描Scan ALL of my page功能。
2. 关闭Best Practices选项，置位OFF。
3. 点击hightlight可以高亮对应元素。

用 AXE Tool 扫描下掘金主页，100+ Issues。

highlight下数量最多的rule，都是颜色对比度问题，没有达到4.5:1的对比度，详见规则 1.4.3

AXE Tool 还有很多其它高级收费功能，比如局部扫描、键盘扫描、导出report等等。 当然也会存在一些bug，可能会有些扫描出来的问题不是问题，也就是误扫，原因可能是Tool bug、也可能是浏览器bug。

Lighthouse

developer.chrome.com/docs/lighth...

Lighthouse 是由Google 开发并开源的Web 性能测试工具，通过监控和检测网站应用的各方面性能表现，为开发这提供优化用户体验和网站性能提供指导建议。

用 Lighthouse 扫下掘金主页试试，发现颜色对比度问题也被扫出来了。扫描结果跟 AXE Tool 基本一样，但是 Lighthouse 明显扫描很慢，它更多用于检测网站性能用的。AXE Tool 相比之下扫描更全，更快，提示更好些。

键盘及焦点

通过键盘（Tab、Shift+Tab、空格回车、方向键等）可以操作页面功能。具体测试点会在之后的规则中详细介绍。

读屏软件

NVDA screen reader 软件，下载地址：www.nvaccess.org/download/

打开后可以在设置中将 Speech viewer 打开，可以看到读屏内容。也可以在设置中关闭读屏的声音。

由于用户使用读屏软件一般是用键盘操作页面，所以避免鼠标对读屏的影响，可以选择关掉鼠标行为

NVDA 是免费读屏软件，其它收费的比如 JAWS 大白鲨 ，相比 NVDA 更强大，在某些规则上，JAWS 支持比NVDA 更好，比如有些特殊网页内容JAWS能正确读出来，但 NVDA 就有bug。 测试就是打开读屏软件，然后用键盘操作页面功能，读屏可以读出每个可操作或交互元素的类型、内容、意义等。具体测试点会在之后的规则中详细介绍。

规则

本专栏主要详细介绍每条 WCAG 2.1 AA 规则，解读分析每个规则，然后以开发角度提出解决方案，以测试角度提出测试建议。

WCAG 2.1 官方文档：www.w3.org/TR/WCAG21/ 中文：www.w3.org/Translation...

目录

• 1. Perceivable 可感知性
  • 1.1 Text Alternatives 替代文本
    • 1.1.1 Non-text Content 非文本内容 A
  • 1.2 Time-based Media 时基媒体
    • 1.2.1 Audio-only and Video-only (Prerecorded) 纯音频和纯视频（预录） A
    • 1.2.2 Captions (Prerecorded) 字幕（预录） A
    • 1.2.3 Audio Description or Media Alternative (Prerecorded) 音频描述或媒体替代（预录） A
    • 1.2.4 Captions (Live) 字幕（直播） AA
    • 1.2.5 Audio Description (Prerecorded) 音频描述（预录） AA
    • 1.2.6 Sign Language (Prerecorded) 手语（预录） AAA
    • 1.2.7 Extended Audio Description (Prerecorded) 扩展音频描述（预录） AAA
    • 1.2.8 Media Alternative (Prerecorded) 替代媒体（预录） AAA
    • 1.2.9 Audio-only (Live) 纯音频（直播） AAA
  • 1.3 Adaptable 适应性
    • 1.3.1 Info and Relationships 信息和关系 A
    • 1.3.2 Meaningful Sequence 有含义的顺序 A
    • 1.3.3 Sensory Characteristics 感官特性 A
    • 1.3.4 Orientation 定位 AA
    • 1.3.5 Identify Input Purpose 明确输入目的 AA
    • 1.3.6 Identify Purpose 明确目的 AAA
  • 1.4 Distinguishable 可辨别性
    • 1.4.1 Use of Color 颜色用途 A
    • 1.4.2 Audio Control 音频控制 A
    • 1.4.3 Contrast (Minimum) 对比度（最小） AA
    • 1.4.4 Resize Text 调整文本 AA
    • 1.4.5 Images of Text 文本图像 AA
    • 1.4.6 Contrast (Enhanced) 对比度（加强） AAA
    • 1.4~~.7 Low or No Background Audio 低背景音或无背景音 AAA~~
    • 1.4.8 Visual Presentation 视觉呈现 AAA
    • 1.4.9 Images of Text (No Exception) 文本图像（没有例外） AAA
    • 1.4.10 Reflow 反复滚动 AA
    • 1.4.11 Non-text Contrast 非文本对比 AA
    • 1.4.12 Text Spacing 文本间距 AA
    • 1.4.13 Content on Hover or Focus 悬停或焦点内容 AA
• 2. Operable 可操作性
  • 2.1 Keyboard Accessible 键盘可访问
    • 2.1.1 Keyboard 键盘 A
    • 2.1.2 No Keyboard Trap 无键盘陷阱 A
    • 2.1.3 Keyboard (No Exception) 键盘（没有例外） AAA
    • 2.1.4 Character Key Shortcuts 字符键快捷键 A
  • 2.2 Enough Time 充足的时间
    • 2.2.1 Timing Adjustable 定时可调 A
    • 2.2.2 Pause, Stop, Hide 暂停、停止、隐藏 A
    • 2.2.3 No Timing 无定时 AAA
    • 2.2.4 Interruptions 中断 AAA
    • 2.2.5 Re-authenticating 重新认证 AAA
    • 2.2.6 Timeouts 超时 AAA
  • 2.3 Seizures and Physical Reactions 癫痫和身体反应
    • 2.3.1 Three Flashes or Below Threshold 闪光三次或低于阈值 A
    • 2.3.2 Three Flashes 闪光三次 AAA
    • 2.3.3 Animation from Interactions 交互动画 AAA
  • 2.4 Navigable 可导航性
    • 2.4.1 Bypass Blocks 绕过模块 A
    • 2.4.2 Page Titled 网页标题 A
    • 2.4.3 Focus Order 聚焦顺序 A
    • 2.4.4 Link Purpose (In Context) 链接目的（在上下文里） A
    • 2.4.5 Multiple Ways 多种方法 AA
    • 2.4.6 Headings and Labels 标题和标签 AA
    • 2.4.7 Focus Visible 焦点可见 AA
    • 2.4.8 Location 定位 AAA
    • 2.4.9 Link Purpose (Link Only) 链接目的（只针对链接） AAA
    • 2.4.10 Section Headings 章节标题 AAA
  • 2.5 Input Modalities 输入方式
    • 2.5.1 Pointer Gestures 指针手势 A
    • 2.5.2 Pointer Cancellation 指针取消 A
    • 2.5.3 Label in Name 名称中的标签 A
    • 2.5.4 Motion Actuation 运动驱动 A
    • 2.5.5 Target Size 目标尺寸 AAA
    • 2.5.6 Concurrent Input Mechanisms 并发输入机制 AAA
• 3. Understandable 可理解性
  • 3.1 Readable 可读性
    • 3.1.1 Language of Page 网页语言 A
    • 3.1.2 Language of Parts 局部语言 AA
    • 3.1.3 Unusual Words 特殊单词 AAA
    • 3.1.4 Abbreviations 缩写 AAA
    • 3.1.5 Reading Level 阅读水平 AAA
    • 3.1.6 Pronunciation 发音 AAA
  • 3.2 Predictable 可预测性
    • 3.2.1 On Focus 焦点 A
    • 3.2.2 On Input 输入 A
    • 3.2.3 Consistent Navigation 一致性导航 AA
    • 3.2.4 Consistent Identification 一致性标识 AA
    • 3.2.5 Change on Request 请求变化 AAA
  • 3.3 Input Assistance 辅助输入
    • 3.3.1 Error Identification 错误标识 A
    • 3.3.2 Labels or Instructions 标签或说明 A
    • 3.3.3 Error Suggestion 错误建议 AA
    • 3.3.4 Error Prevention (Legal, Financial, Data) 错误预防（法律、金融、数据） AA
    • 3.3.5 Help 帮助 AAA
    • 3.3.6 Error Prevention (All) 错误预防（全部） AAA
• 4. Robust 鲁棒性
  • 4.1 Compatible 兼容
    • 4.1.1 Parsing 解析 A
    • 4.1.2 Name, Role, Value 名称，角色，值 A
    • 4.1.3 Status Messages 状态信息 AA

总结

由于篇幅问题，具体每条规则将会在后续文章中详细介绍，不但会介绍每条规则的理解、分析，而且也会提供开发解决方案、和测试建议等。

下一篇会详细介绍 1. Perceivable 可感知性 下的规则介绍。

欢迎订阅专栏：万字解析 WCAG 2.1 AA 网页内容无障碍指南