Web Accessibility · 让更多人可以使用 Web 应用

Web Accessibility 作为高质量 Web App 的一个重要方面，可以为更多的用户提供通用的 Web App，增强用户体验。

Accessibility

在理解 Web Accessibility 之前，需要先了解 Accessibility 的含义。

Accessibility，简称 A11y，中文译名有辅助功能、无障碍功能，指的是一种为残障人士提供正常体验的设计意图。

残障人士是一种弱势群体，他们与普通人相比，可能具有视觉障碍、听觉障碍、运动障碍、感知障碍等。这些障碍会对他们完成特定的任务产生不良影响。为了让他们克服这些障碍，尽可能像普通人一样能完成特定的任务，设计师设计出了许多的工具。

日常生活中，我们常常也能接触的工具有：

• 为行动不便的人设计的拐杖、轮椅
• 为视力不便的人设计的眼镜、盲文、盲道
• 为听力不便的人设计的助听器、手语

除了这些工具，我们可能还会训练或培养可以辅助他人完成特定任务的生物：

• 为盲人领路的导盲犬
• 帮助语言不同的双方理解与交流的翻译人员

像上面介绍的专门指帮助有某种障碍的人完成特定的任务所提供的辅助工具、设备、环境等统称为 Assistive Technology (辅助技术)。

Assistive Technology

Assistive Technology 泛指一切可以帮助残障人士完成特定任务的事物（或系统）。

这里的帮助包括了提高与维持两种含义：

• 提高是指增强残障人士完成特定任务的能力，更便捷高效地完成任务
• 维持是指保持残障人士完成特定任务的能力，避免能力显著下滑

还有一个类似的术语 Adaptive Technology (自适应技术)，特指一切专门为残障人士设计的可以帮助残障人士完成特定任务的事物（或系统）。

需要特别指出的是，Assistive Technology 不仅仅是可以帮助残障人士完成特定的任务，也可以帮助普通人完成特定的任务。

所以，Assistive Technology 对每个人都是有益的。

Computer Accessibility

我们已经了解 Accessibility 的应用范围特别广，而 Web Accessibility 还只是 Computer Accessibility 的部分应用。

Computer Accessiblity (计算机辅助功能) 泛指人机交互中帮助残障人士访问计算机资源的功能。

访问 (Aceess) 计算机包括了获取计算机界面内容和操作计算机界面元素。

而人机交互的主要手段就是通过 User Interface （用户界面），简称 UI。

目前，在计算机中使用最为广泛的就是 GUI (Graphical User Interface) - 图形用户界面。

众所周知，图形用户界面因为其易于理解而广泛流行，因为大多数人对图像的理解能力比文字要强得多。但这种便捷是针对普通人而言，如果是盲人呢，既然看不见图像，就更谈不上便捷了。

所以计算机就需要提供为图形界面提供另一种替代形式，如果为每一种形式都设计界面那就问题就复杂了，所以计算机采用了一个很聪明的做法：把图形界面上的每一个元素都用对象表示法来表示。

这种对象又称为 Accessible Object，其将包含以下属性：

• name: UI 元素名
• role: UI 元素类型
• state: UI 元素状态，比如已按下、已选择等
• description: UI 元素的补充说明
• value: UI 元素包含的内容或替代内容

计算机系统将这些 Accessible Object 以及相应的操作方法进行封装，就得到了统一的 API (应用程序编程接口)，也就是所谓的 Accessibility API。

我们知道，计算机的操作系统是多样化的，比如常用的桌面操作系统包括

• Microsoft Windows
• Apple macOS
• Linux

常用的移动端操作系统包括：

• Android
• iOS

不同的操作系统有不同的 GUI 系统，为 GUI 应用程序提供运行平台 (Platform)，因此每一种平台都需要提供平台特定的 Accessibility API。

• Microsoft Windows: MSAA (Microsoft Active Accesibility)、Microsoft UI Automation、IAccessible2
• Apple macOS: NSAccessibility
• Linux: AT-SPI (Assistive Technology - Service Provider Interface)
• Android: android.accessibilityservice
• iOS: UIAccessibility

而 GUI 软件是使用编程语言开发出来的，所以编程语言是软件的开发平台，也必须提供特定的 Accessibility API，比如 Java 的 JAAPI (Java Accessibility API)。

每种平台提供自己的 Accessibility API 就可以方便地开发基于该平台的辅助应用程序，帮助残障人士与计算机交互。

最常见的辅助应用程序就是屏幕阅读器 (Screen Reader)了，基本主流系统都配备了这种辅助应用程序。

• Microsoft Windows 的 Narrator
• Apple macOS 的 VoiceOver
• Android 的 TalkBack
• iOS 的 VoiceOver

屏幕阅读器就可以通过 Accessibility API 获取屏幕上的 UI 元素的信息，再通过合成语音朗读给用户。另外，用户还能通过键盘等输入手段在 UI 元素之间进行导航，导航的具体实现会在之后的章节进行介绍。

Web Accessibility

终于，可以好好来介绍本文的主角 - Web Accssibility 了。相信如果你认真读过了之前的章节，就应该能猜到 Web Accssibility 的含义了。

Web Accessibility 指的是帮助残障人士访问 Web 内容的功能。

更具体点说，Web Accessibility 使得残障人士可以感知和理解 Web 内容，并可以导航来获取感兴趣的内容，也可以与 Web 控件交互实现对 Web 内容的操作（增、删、改、查）。

然而要实现 Web Accessibility 并不是一个简单的任务，需要多方努力才能达成该目标。

• Web 内容，包含文字、图片、音频、视频等
• 编辑工具，编辑 Web 内容的工具
• 验证工具，验证 Web 内容是否提供必要的 Accessibility
• User Agent（用户代理），接受与处理 Web 内容的客户端，常见的有浏览器
• 辅助技术，包括屏幕阅读器、屏幕键盘等
• 开发者，包括设计师、程序员、编辑者等
• 用户，需要了解 UA (用户代理) 和 AT (辅助技术) 的使用

正因为涉及的角色如此之多，明确每个角色的责任以及和其他角色合作就显得非常重要。

W3C 的 WAI (Web Acessibility Initiative) 就是为此而生的，WAI 为实现 Web Accessibility 制定了一系列的规范，并撰写了相应的指南来指导每个角色实现 Web Accessibility。

以下列出一些主要的指南与规范：

• Web Content Accessibility Guidelines (WCAG) 2.0: 定义如何让 Web 内容可被残障人士访问。
• Authoring Tool Accessibility Guidelines (ATAG) 2.0: 定义如何让 Web 编辑工具可被残障人士访问。
• User Agent Accessibility Guidelines (UAAG) 2.0: 定义如何让 UA 可被残障人士访问。
• Accessible Rich Internet Applications (WAI-ARIA) 1.1: 定义如何让动态 Web 内容可被残障人士访问。

对于开发者而言，WCAG 和 ARIA 是相关性比较高的参考文档。

WCAG 定义了四个原则来实现 Accessibility：

• 可感知（Perceivable）：用户可以通过各种途径感知网站内容。
• 可操作（Operable）：用户可以使用各种设备来使用网站中的 UI 组件和浏览网页。
• 可理解（Understandable）：用户可以理解网站内容与设计意图。
• 健壮性（Robust）：用户可以通过多种浏览器（User Agent）和辅助功能浏览网站。

WebAIM（网络无障碍功能关爱）小组将 WCAG 指南提炼成一份易于遵循的检查清单。开发者可以遵循该检查清单，进行无障碍功能的开发。

而 ARIA 则是为日益复杂的 Web 内容定义了一套通用语义，使用 role 将 Web 内容进行分类，并定义每种 role 支持的 properties 和 states。

另外，为了实现电子出版物（比如 EPUB 电子书）和图形（比如 SVG 图形）的 Web 内容的 Accessibility，WAI 分别制定了以下文档扩展 ARIA 的语义:

• Digital Publishing WAI-ARIA Module 1.0
• Graphics WAI-ARIA Module 1.0

为了帮助 UA 将 ARIA 的语义暴露给 Accessibility API，WAI 又制定了以下文档描述 ARIA 的 Role、Property 和 State 与 Accessibility API 的 Accessible Object 的映射关系：

• Core Accessibility API Mappings 1.1
• Accessible Name and Description: Computation and API Mappings 1.1
• Digital Publishing Accessibility API Mappings 1.0
• HTML Accessibility API Mappings 1.0
• SVG Accessibility API Mappings 1.0

除此之外，WAI 还为 Web App 开发者撰写了开发 Accessible Web App 的最佳实践，描述了如何使用 ARIA 的 Role、Property 和 State 让 Web App 组件可访问、可导航和可操作。

• WAI-ARIA Authoring Practices 1.1

总结

至此为止，已经介绍了：

• Accessibility (辅助功能) 指的是为残障人士提供正常人应具有的体验。
• Assistive Technology (辅助技术) 泛指一切可以帮助残障人士完成特定任务的事物（或系统）。
• Computer Accessiblity (计算机辅助功能) 泛指人机交互中帮助残障人士访问计算机资源的功能。
• Accessibility API (辅助功能应用程序编程接口) 指的是计算机操作系统为辅助技术软件提供的编程接口。
• Web Accessibility (网络辅助功能) 指的是帮助残障人士访问 Web 内容的功能。
• 与 Web Accessibility 有关的规范文档。

既然我们已经了解了 Web Accessibility 的背景知识以及相关概念间的关系，接下来是时候了解作为 Web App 开发者，应该如何开发 Accessible Web App 了。

我将在下一篇博文中详细讲述 Accessible Web App 的开发。