网页内容无障碍的文档调研
最近组内成立了无障碍化虚拟小组，目标是推进淘宝网的无障碍化访问。
作为前期调研，我查阅了不少无障碍（Web Accessibility）的文档。w3c内的无障碍文档体系非常庞大，它们的关系错综复杂，包含了众多的专有名词。
在这里，我尝试梳理这些名词和文档，给有兴趣参与web无障碍的同学提供指引。同时我们看看这些文档可以如何帮助我们开启网页无障碍的工作。
Web Accessibility Initiative (WAI) 网页无障碍倡议
作为w3c的web无障碍工作信息汇总网站，在这里你可以找到所有web无障碍相关的策略，指南和资源。文档的面向受众非常广泛，有Web设计者和开发者，政策制定者，采购人员，教师和学生等。作为开发者，我们更关注的内容应该是以下这些：
- 《Introduction to Web Accessibility 网页无障碍介绍》
- 《Essential Components of Web Accessibility 网页无障碍的基本组件》
- 《Web Content Accessibility Guidelines (WCAG) 网页内容无障碍指南》
The WCAG 2.0 Documents 网页无障碍指南2.0的支持文档
WCAG 2.0的支持文档有四个，在《The WCAG 2.0 Documents》 有所介绍（但是它所画的第一个关系图让人有些难以理解）。
- 《WCAG 2.0 网页无障碍指南》
- 《How to Meet WCAG 2.0 如何符合网页无障碍指南》
- 《Understanding WCAG 2.0 如何理解网页无障碍指南》
- 《Techniques for WCAG 2.0 网页无障碍指南的技巧》
它们的关系如下：
其中箭头所在为引用方。例如 How to Meet WCAG 2.0 —-> Understanding WCAG 2.O 即代表前者被后者引用。
从图中的关系我们可以得出结论，如果需要阅读 WCAG 2.0 的相关文档，最全面的是__《Understanding WCAG 2.O》__。
Techniques for WCAG 2.0 网页无障碍指南的技巧
对于web开发者而言，我们更关注的是“如何使得我们的网页更符合《网页无障碍指南》”。因此我们可以参考《网页无障碍指南的技巧》中的技巧去优化我们的前端代码。
但是直接通过该文案，无法理解技巧是如何与指南中的准则相对应。我们可以通过阅读《如何理解网页无障碍指南》，针对每一个准则查看 Techniques and Failures for Success 章节，理解每个技巧是如何服务于准则的。
通过查阅技巧章节，我们可以总结出一份技巧列表，列出技巧对于无障碍访问的优先级。针对优先级进行工具排查，确定我们的网页是否符合《网页无障碍指南》。
Accessible Rich Internet Applications (WAI-ARIA) 可访问的富交互应用
除了简单的图片／文字／超链接，随着前端技术的发展，在应用中出现了越来越多的富交互。 这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。通过Accessible Rich Internet Applications (WAI-ARIA)规范，可以实现应用交互的可访问性，以帮助残疾人以及其他访问障碍者实现对交互的感知。
ARIA定义了一套属性，属性分为role以及对应的states和properties。 ARIA将html元素分为六种role，每种有对应的states和properties。web开发者和无障碍工具厂商共同遵循规范：开发在应用中使用这些属性，无障碍工具厂商读取这些属性，即可达到应用交互的可访问性。
例子
举个伪元素例子。
我们有这样一段html代码：<div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>
这个div模拟了radio的功能，在平时读屏软件是分辨不出来的。但是加上role及aria-checked状态，在读屏软件（NVDA）中读出来就是：
结论
ARIA是web开发中常用的无障碍编程技巧，通过对它的学习和运用，使得我们的应用具备无障碍访问的能力。