了解Web与移动应用程序的无障碍指引

美国疾病控制与预防中心的调查显示，美国人口中有超过6000万的残疾人——也就是说，每4人中就有超过1人患有残疾。在这个数字中，患有行动障碍的人数占比13.7%，患有认知障碍的人数占比10.8%，患有听力障碍的人数占比5.9%，患有视觉障碍的人数占比4.6%。残疾类型如此之多，对一个人浏览网站时可能遇到的困难进行说明就显得至关重要，因此要设计对比度调整、说明文字或基于路径的输入等无障碍指引，帮助这些患有残疾的用户顺利访问和使用网站内容。

在本文中，我们会讨论无障碍使用环境的整体概念及其目的，以及可保证web和移动解决方案无障碍使用的标准化指引。此外，我们也会列出几款工具帮助检查是否满足无障碍使用要求。

什么是无障碍环境，以及为什么它很重要？

无障碍环境指合理设计web内容，让所有用户（无论是身体条件受限、环境受限还是社会经济条件受限的用户）都能够顺利访问和使用软件。来看一下下面这个例子。

图1：WCAG对比度要求的比较

在不做无障碍环境调整的情况下，盲人、聋人或患有认知障碍的用户将无法访问和使用web内容，图1左侧的文字就是一个例子。虽然左右两侧的文字在没有视觉障碍的用户眼中只有细微差别，但只有右侧的文字满足WCAG对比度要求，因此更易于被患有视觉障碍的用户辨认。

无障碍环境可以扩大用户规模，让web内容的使用对于残障人士而言不再是无法完成的任务。无障碍内容可以帮助这类用户降低使用难度，消除障碍。

什么是WCAG？

作为web标准的牵头组织，万维网联盟（W3C）制定了包括Web内容无障碍指南（WCAG）在内的一系列指南，让全体用户都能在无障碍的环境下访问web内容。虽然无法照顾到每一个个体的所有情况，但无障碍环境这个理念的目标是尽可能让更多的用户能够顺利实现与web内容的互动。截至本稿发布日期，最新版的WCAG标准是2.1版。虽然作为继任标准的WCAG 2.2版也已经公布，但该版本目前还处于起草阶段。因此，除非另有明确说明，本文中提及的WCAG均仅指WCAG 2.1版标准。

WCAG由四大基本原则组成，每一条原则又包含若干条指南，总计为13条。这13条指南又进一步被细分为78条可以检验的合格标准，部分合格标准甚至还包含多种情况。最后，每一种合格标准均由低到高分为A~AAA三个等级，用来表示与标准之间的贴合程度。因此，若以满足最低要求为目标，只需关注A级的合格标准即可。由于这种分级制度看起来过于繁琐，因此W3C贴心地提供了带有筛选功能的快速索引页。

一想到无障碍环境，不少人（包括开发人员）立刻想到的是键盘的无障碍操作和导航。键盘的无障碍操作固然重要，但在全部13条指南中只有一条有特别提到过，并且只有四项合格标准有所涉及。因此，WCAG指的必然是更偏向广义层面的无障碍环境。上述四大原则（可感知性、可操作性、可理解性、健壮性）可解决各式各样的问题；其中部分列举如下。

原则1——可感知性：信息和用户界面组件必须以可感知的方式呈现给用户。

合格标准示例：1.4.1 颜色的使用——颜色不是信息传递、动作指示、响应提示和分别视觉元素的唯一手段。

图2：颜色不应该作为信息传递的唯一手段

图2通过颜色、符号、文本的组合来指示某一动作是否成功或某个项目的状态。

原则2——可操作性：用户界面组件和导航必须是可操作的。

合格标准示例：2.1.4 字符快捷键——若在内容中仅使用字母（包括大写和小写字母）、标点符号、数字或符号字符来实现键盘快捷键，则必须至少符合以下条件之一：

• 关闭：配备了可关闭快捷功能的机制
• 重新映射：配备了重新映射快捷键的机制，能够将一个或多个非打印按键包含进来（例如：Ctrl、Alt等）
• 仅在获取焦点后激活：用户界面组件的快捷键仅在该组件获得焦点后激活。

如图3所示，当仅包含字母的快捷键只在下拉菜单获得焦点才激活时，即可通过这些快捷键在下拉菜单中选择。

合格标准示例：2.4.6 标题与标签 – 在标题与标签中说明控制用途。

如图4所示，控制标签描述了各个单选按钮的用途，对输入域及其在上下文中的用途进行了清晰、简洁的说明。

原则3 – 可理解性：信息和用户界面操作必须是可理解的。

合格标准示例：3.2.3 前后一致的导航 – 在同组下多个Web页面中重复出现的导航机制，每一次出现时的相对位置均保持不变，除非用户主动更改。

图5：各个页面的导航应保持一致

图5展示的是作为标题区域特性之一的全局病人搜索框。这个搜索框统一出现在各个页面的左上角，因此可通过应用程序的任意位置访问。

合格标准示例：3.2.4 前后一致的表示 – 同一组Web页面中功能相同的组件要使用前后一致的方式进行标识。

在图6中，我们可以看到三种独立的控制方式，它们的功能相同，但是却采用了不一致的标识。

原则4 – 健壮性：内容必须拥有足够的健壮性，能够被各式各样的客户端解读，包括辅助技术。

合格标准示例：4.1.2 名称、作用与值 – 对于所有用户接口组件（包括但不限于：表单元素、链接、脚本生成的组件），其名称和作用均可通过编程的方式确定；状态、属性、值等可由用户设置的项目可通过编程的方式设置；这些项目变更时会向客户端发送通知，包括辅助技术。

在图7中，搜索按钮的名称和作用已经指定，这样就能够通过编程的方式确定。

合格标准示例4.1.3：状态消息 – 在使用标记语言实现的内容中，状态消息可通过作用或属性以编程的方式确定，这样就可以在不获取焦点的情况下以辅助技术将状态消息呈现给用户。

在图8中，搜索后的结果消息属于状态消息，因此需要合适的作用或属性。

符合性

每一个符合合格标准的页面都有着大量的详细说明——用途说明、使用场景示例、满足要求所需的技术以及常见问题。提供这些信息的目的无一不是为了让开发人员能够实现符合性。

可是符合性在这里是什么意思？难道仅仅是指满足合格标准的要求？WCAG符合性指：

• 满足给定等级（A、AA、AAA）下的所有合格标准
• 页面具有完全的符合性，而非部分符合
• 所有页面都有完整的流程
• 合格标准的满足仅通过支持无障碍环境的技术使用方式实现
• 以不支持无障碍环境或不具有符合性的方式使用的技术无法为页面实现无障碍环境。

法定义务

在美国，《美国残疾人法案》第三章严禁歧视残疾人；不过这项规定对web内容有多大的影响并不明确。对于《美国残疾人法案》是否要求web内容运营商在其网站和应用程序中为残疾人创造无障碍环境这一点，不同的法院之间还存在分歧，不过从最近的投诉、诉讼、裁定、看法走向可以看出， WCAG 2.1 AA级可充分满足《美国残疾人法案》的要求。

《1973康复法案》第508节关注如何消除信息技术中的障碍，让联邦机构的残疾人能够顺利使用。若个人网站与某个联邦机构签署了合约或接受了联邦的资助，则也应当遵守这些要求。2017年，相关部门对第508节的内容进行了更新，采用WCAG 2.0合格标准作为其标准。

如需了解美国有关无障碍环境的法律、政策以及相关的WCAG指南（如有），可访问W3的网站查阅。

DevTools

了解WCAG的指南和要求是好事，但如何确认您的web内容或您使用的网站是无障碍的？所幸的是，Chrome的DevTools（我们在之前的文章中讨论过）能够提供多种途径确认一个网页是否满足特定的无障碍环境要求。首先是元素检查工具。利用这款工具在某个页面元素上悬停，即可带出该元素无障碍指标的信息提示框。在这个提示框内，您可以看到对比度、名称、作用和能否通过键盘获得焦点等信息。虽然无法覆盖给定符合性等级下的所有合格标准，但是这些项目可以帮助您快速确认部分重要需求和常见需求。

或者，打开“元素”选项卡并选择某一行即可将焦点转移到该元素上。选择“无障碍环境”选项卡即可打开与无障碍环境的相关内容。在“计算属性”中，您可以找到名称、作用、是否可通过键盘获得焦点等前面讨论过的项目。虽然在本文中属于超纲内容，但需要注意的是，ARIA（无障碍富互联网应用）属性（见图11）对于辅助技术而言是很重要的，在多项合格标准中都有涉及。

查看对比度时，从“无障碍环境”选项卡切换到“风格”选项卡。点击色块打开拾色器。然后，在设色器中展开对比度域，即可看到满足要求的颜色。展开色域时，拾色器上会出现两条线，分别表示AA级和AAA级的符合性。在线条同一侧的所有颜色都拥有相同的结果，即：若当前的对比度无法满足要求，那么在线条的同一侧选取任意一种颜色同样也无法满足要求。

Lighthouse

Chrome浏览器在无障碍环境符合性的检测方面更加深入，并推出了Lighthouse工具。在DevTools中选择Lighthouse标签页，即可打开可运行报告的选项。

图13：选择报告并使用DevTool的Lighthouse生成

在“分类”标题下有一个“无障碍环境”的复选框，选中后即可确保审核工具在当前页面查找无障碍环境的相关问题。在“设备”标题下，您可以在台式电脑和手机之间来回切换，确保您审核的页面在两种环境下都满足要求。准备就绪后，单击“生成报告”按钮，Lighthouse就会运行一系列测试，对页面的易用性进行评估。

评估完成后会生成一份“无障碍环境”报告，其中包括整体的“无障碍环境评分”以及可以展开并继续检查具体元素的标题。将鼠标移到某个元素上方，即可在页面中高亮显示该元素，而选中报告中的元素即可直接跳转至对应的代码。

图14：Lighthouse中的无障碍环境报告

虽然审核报告在检查是否符合无障碍环境指南时非常实用，但是不应将其用于取代人工检查。有些东西是Lighthouse鞭长莫及的，选项卡的逻辑顺序就是一个例子，因此人工检查是非常必要且推荐的。

结论

美国有超过6000万的残障人士，web的无障碍环境不应该仅仅只是马后炮。采取一些办法帮助各类残障人士访问和使用您的web内容，不仅可以提升您的用户规模和客户群，还可以帮助您避免吃官司。虽然实现并遵守本文提到的WCAG指南是一项沉重的负担，但最终您会发现，无障碍环境是物有所值的。