背景及介绍
WCAG2.0（网页内容无障碍指南）是 Web 2.0 时代最广泛使用的无障碍标准之一，该标准的准则和技术可供网站和 Web 应用程序设计者、开发者和测试人员使用并实现，以确保他们所开发的 Web 内容易于访问，且无障碍性最大化。 WCAG2.0 包含 12 个准则，每个准则有相应的成功标准，每个标准又有相应的技术供参考使用。其中，未通过 AAA 级别的 WCAG2.0 最低联系可实现性称为“Level A"准则（A 级），“Level AA"准则（AA 级）覆盖 A 级并且也包含一些更加严格的要求，“Level AAA"准则（AAA 级）覆盖 A 和 AA 级，并且其标准要求更为严格。
标准的具体内容和细节
接下来我们将简要介绍各个准则以及其下面的成功标准：
- 可访问的内容，即保证信息和用户界面都是可访问的。这意味着要针对所有用户（包括残疾人）开发内容，并充分考虑到各种使用情形。
- 1.1 提供与非文本内容替代的文本。
- 1.2 提供时间存在限制的替代内容。
- 1.3 适当使用状态、输入和界面组件。
- 键盘访问性，即充分考虑到使用键盘导航的用户，例如充分考虑视障人士的情况。
- 2.1 焦点能够通过键盘访问各个组件。
- 2.2 提供有用的标记文的名称。
- 2.3 提供有足够的时间充分进行任何任务，或者提供充分的控制和调整时间的方式。
- 容易理解和操作，即保证网站易于理解和使用。这是底端用户的重要考虑因素，因为只要有人能够方便地使用您的网站或应用程序，不管他们是否有功能缺失或残疾。
- 3.1 使页面内容具有清晰度，免受视力、听力或阅读困难的影响。
- 3.2 以可预测的方式提供内容。
- 3.3 使用语言的方式可以被理解，并明确与用户问题的相关性。
- 易于理解的解释和操作，即提供语言和操作说明，以便广泛群体理解和操作。
- 4.1 通过输入法和增强的语言可以准确地描述用户的需要和状态。
- 4.2 激活和控制界面组件的控件和界面元素可以被发现装备和操作。
- 4.3 消除具有不同方式实现的方式的困难，以实现任务的不同要求。
- 内容适应能力，即适应广大使用人群的不同需求，不论他们的技术能力、语言能力、知识水平及使用环境等等。
- 5.1 信息和操作可以直接灵活组合。
- 5.2 提供给用户的信息和操作可以以多种方式呈现。
- 5.3 动态内容可以更新、呈现和控制，而不会导致用户输入丢失。
- 完整性，即保证内容无障碍地呈现，并且以前、中心和后端的所有部分都可以按预期方式合并。
- 6.1 使 Web 页面具有提供辅助性布局和组织的功能和属性。
- 6.2 保留和引用页内链接的困难，使页面内容完整。
- 6.3 像一个标准 W3C 文档一样跨设备保存和交换网站的内容。
- 大尺寸文本，即可以放大的内容以适应更大的屏幕或更低的分辨率。
- 7.1 以大尺寸文本为基础，将网页布局以及概念分类分清。
- 7.2 提供操作机制，可以通过缩放来调整网页中的所有文本大小。
- 7.3 不要使用固定大小的文本，而应该充分适应显示响应并适应任何用户需要的尺寸。
- 低视障用户的可访问性，即如何设计网站可以使低视障用户更易于访问操作和内容。
- 8.1 使用颜色和对比度，以便人们更容易区分内容和布局。
- 8.2 提供文字相对于背景的高度可见性和易于理解的头部优先级。
- 8.3 针对文本图像区域使用识别技术，提供与视觉类问题相关的支持。
- 测试，调试和维护，即测试你的内容以确保它符合WCAG 2.0而设计的最佳实践。
- 9.1 为您的网站或应用程序开发自动的测试程序，以便自动识别任何限制或问题。
- 9.2 经常进行内容更新和维护，以便确保内容符合访问性和结果一致性的要求。
- 9.3 在您开始进行任何新的设计和开发之前，请开发和展示一个特定的性能目标清单。
- 最佳实践，即通过考虑到所有策略和测试确保您开始按照无障碍标准工作。
- 10.1 确保设计始终与用户一致，并考虑如何使用这些信息进行策略性的调整。
- 10.2 访问任何设计讨论小组，并在任何新的设计之前，确定标准并优先考虑无障碍性。
- 10.3 在访问性测试与团队中的其他设计师、开发人员和测试人员进行讨论，并且相互交流所学。
应用技术
在使用 WCAG2.0 进行设计和开发的过程中，开发人员需要掌握以下技术：
- 使用有意义和充分描述的 ALT 和标题。使用文本对象和图片说明，而不是使用某些可能无法访问的对象。 例如，以下代码段为面向残疾人设计的书签工具栏添加了正确的 ALT 描述。
<button class="add-to-favs"> <img src="/images/favorites.png" alt="Add this page to your favorites" /> </button>
- 在使用 JavaScript 的时候，要确保在操作时可以使用键盘或其他辅助性设备访问。需要使用 ARIA 规范的元素，特别是
role=”button”和aria-pressed=”true”按钮的空格键功能。 例如，以下代码段演示了使用 ARIA 规范的按钮。
-- -------------------- ---- -------
---- ----------------------
------------
-------------
------------
-----------------------------------------
--------------------
-----------------------------------
----- --------------------------------- ------------
------- 当提供需要用户输入的表单时，我们需要确保可以使用不同的方法来输入内容，如键盘、语音和屏幕阅读器等。需要使用表单字段的“name”和“ID”属性。 例如，以下代码段演示了如何精确地标识一个 HTML 表单字段。
<label for="first-name">First Name</label> <input type="text" id="first-name" name="first-name" />
总结
WCAG2.0 是一组用于设计和开发易于访问的网站和应用程序的标准。 上面我们介绍了常用的准则以及具体技术点。当你开始设计和开发Web应用程序时，WCAG2.0 为实现对残疾人、使用低端用户等用户群体的考虑提供了极大的便利和帮助。 熟练掌握 WCAG 2.0，可以让你的 Web 应用程序更加多元化、易于使用、操作性和可访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3e1eb48841e989404ede2