Web 2.0 技术中的可访问性
简介
可访问性移除了特定群体访问信息的障碍，它正在成为 Web 应用程序的公共需求。可访问 Web 应用程序要帮助的目标群体包括残疾人、老年用户和其他难以操作程序的可视及物理元素的人。在现代辅助技术的帮助下，这些人将能够与软件应用程序交互，但前提是这些应用程序能全面兼容可访问性标准。
随着富客户机技术的迅速发展，许多 Web 应用程序都已经发展到了 Web 2.0 时代。使用 Dojo 等 Ajax库或 Flash 等其他客户端技术，网站正在为浏览器带来更加可靠的用户体验。用户可以动态更新 Web 元素，并在页面中随意拖放它们。曾经认为只适用于桌面应用程序的用户体验现在已经可供 Web 用户使用。
2008 年，致力于开发 Web 标准的国际组织万维网联盟（World Wide Web Consortium，W3C）发布了 Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0 文档定义了一系列指导方针，以提高 Web 内容对于残疾人的可访问性。WCAG 2.0 旨在涵盖大多数已有 Web 技术以及可能的未来技术，包括 Web 2.0 技术中的动态内容。
WCAG 2.0 称，Web 2.0 应用程序中通常存在一些常见的可访问性问题。这些问题可以分为四类：
- 文档结构
- 动态内容更新
- 增强键盘的可访问性
- 小部件的可访问性
在本文中，我们将分别讨论这些问题，并提供一些可行的解决方案。
WAI-ARIA 简介
WAI-ARIA 的全称是 Web Accessibility Initiative – Accessible Rich Internet Application 套件。它定义了一些方法来提高 Web 内容和 Web 应用程序对于残疾人的可访问性。它的一些 Web 2.0 特性尤其有用，比如动态内容以及使用 Ajax、HTML、JavaScript 及相关技术开发的其他高级用户用户界面控件。WAI-ARIA 是一组由普通 HTML 标记组成的标记库，这些标记只能由浏览器和支持它们的 Assistive Tools (AT)映射到有用的信息。WAI-ARIA 充当 AT 和 Web 用户界面之间的协议，这为 Web 页面用户界面带来了更加丰富的信息，比如角色和状态。图 1 显示了 Assistive Tool 与 Web 用户界面之间的关系。
图 1. AT 和 Web 页面之间的关系（使用 WAI-ARIA）
WAI-ARIA 主要包括两种内容：WAI-ARIA Roles 以及 WAI-ARIA States 和 Properties。表 1 显示了 WAI-ARIA 内容的主要分类。
表 1. WAI-ARIA 的主要内容
| 角色（Roles） | 状态和属性（States and Properties） |
|---|---|
| 基本类型（Base Types） | 小部件属性（Widget Attributes） |
| 用户输入小部件（User Input Widgets） | 实时区域属性（Live Region Attributes） |
| 用户界面元素（User Interface Elements） | 拖放属性（Drag-and-Drop Attributes） |
| 专用区域（Specialized Regions） | 关系属性（Relationship Attributes） |
| 路标角色（Landmark Roles） |
目前，许多 Web 2.0 特性都无法提供给残疾人使用，特别是那些依赖屏幕阅读器和无法使用鼠标设备的人。WAI-ARIA 定义了一些 Assistive Tools 的功能，我们将在后续小节中讨论这方面的信息。另外，一些浏览器和 Assistive Tools 已经提供了对 WAI-ARIA 的支持，比如 FireFox 3.0 和 JAWS 10.x。
使用 WAI-ARIA 解决动态 Web 内容中的常见可访问性问题
现在，我们将介绍 WCAG 2.0 确定的四种常见问题，并讨论一些解决方案。
文档结构在当前的 HTML 版本中，无法采用编程的方式来识别页面元素的功能和作用。因此，要让屏幕阅读器将当前页面位置告诉用户是几乎不可能的。此外，屏幕阅读器也不能识别页面元素的作用。举例来说，<div> 可以是弹出窗口、文本输入框或者其他对象。WCAG 2.0 表示，Web 应用程序应该提供一种快捷方式（通常是一些链接）来允许用户直接定位页面上的主要内容。这些链接将被识别为“跳转到主要内容”的链接。这将帮助用户快速识别页面的主要内容，而这是远远不够的。
在 IAccessible 和 IAccessble2 这样的 GUI 可访问性 API 中，常见的解决方案是为 GUI 对象提供一个“角色”属性，用于指定其作用。W3C ARIA 标准也定义了此“角色”属性。接下来，我们来领略一下角色属性的魔力，以及如何使用它为 Web 应用程序提供清晰的结构。WAI-ARIA 将所有 HTML 元素划分为以下几种角色：
- 基本类型（Base Types）—此角色用于描述角色层次结构的最高层次。基本类型角色都是抽象的，并且不应在内容中使用。这些基本角色包括复合（composit）、路标、角色类型、结构、小部件和窗口。
- 用户输入小部件（User Input Widgets）—这些角色适用于表单元素或其他常用用户输入小部件。因此，属于这种角色的元素将用于收集和维护用户输入。这些角色包括复选框、组合框和单选按钮等。
- 用户界面元素（User Interface Elements）—这些角色适用于图形用户界面。这些元素对于向用户显示小部件类型非常有用。这些角色包括按钮、链接和树等。
- 文档结构（Document Structure）—这些角色描述页面内容的组织结构。文档结构通常不具有交互性。这些角色包括文章、文档和标题等。
- 专用区域（Specialized Regions）—这些角色描述应用程序用户界面的特殊独立区域。这些角色包括警告、对话框、进度条等。
- 路标角色（Landmark Roles）—这些角色与文档结构极为类似，但其作用是充当导航路标，并且通常描述 Web 页面上的某个区域。这些角色包括应用程序、横幅、补充说明、内容信息、主内容、导航和搜索。
现在，我们将通过一个示例来演示如何使用路标角色来确定 Web 页面中的区域。图 2 显示了一个典型的网站（http://www.aol.com）。
图2： 一个典型网站
这个网站包括若干部分：搜索、导航和主内容等。在本例中，您可以通过编写如清单 1 所示的代码来使用路标角色。
清单1：向页面元素添加路标标识符
<html>
<body>
…
<div role="search">
The search area
</div>
<div role="navigation">
The navigation area
</div>
<div role="main">
The main content area
</div>
…
</body>
</html>
然后，页面将被分为三个区域，如图 3 所示。
图3：带路标角色的网站
动态内容更新
内容更新是一个最具有典型性的 Web 2.0 特性。使用 Ajax技术，可以只更新页面的一些部分，而不用刷新整个页面。但是，这种更新可能会导致一些可访问性问题，因为在更新发生时很难提醒残疾用户。并不是因为我们无法提示更改；JavaScript 代码和其他方法都可以捕获它们。但是，并非所有的消息和更改都是面向用户的；其中一些是页面的操作，而将这些事件通知给用户是不合适的。使用传统技术则很难确定应该将哪些更改提醒给用户。
在使用 WAI-ARIA 之前，JAWS 这样的屏幕阅读器可以读取受关注元素的消息或文本，以及一些具有“for”属性的标签。在 HTML 中，只有链接和表单元素可以接收键盘关注。通常，可接收关注的元素表示它们可以被操作。但也有一些纯信息元素无法接收关注，但却需要将它们通知给用户。图 4 显示了一个 Dojo 弹出窗口，其中包含一条提醒消息。
图 4.带有一条消息的 Dojo 弹出窗口
窗口打开后，屏幕阅读器无法通知用户打开了一个带消息的窗口。此窗口还锁定了窗口区域外部的其他窗口部分。这会导致用户无法控制 Web 页面，且无法阅读任何内容。清单 2 显示了此弹出窗口的源代码。
清单 2. 弹出窗口的源代码
<div id="cantmove" class="dijitDialog dijitContentPane dijitDialogFixed"
waistate="labelledby-cantmove_title" wairole="dialog" tabindex="-1" role="dialog"
aria-labelledby="cantmove_title" widgetid="absolute; top: 194px; opacity: 1;
left: 611p;" title="">
<div class="dijitDialogtitleBar" dojoattachpoint="titleBar" title="unmovable" />
<div class="dijitDialogPaneContent" dojoattachpoint="containerNode" style="width:
auto; height: auto;">
<p>
You should not be able to
<br />
drag this dialog
</p>
</div>
</div>
通过 WAI-ARIA，您可以标识作为“活动”区域动态更改的区域。这使屏幕阅读器能够理解内容的动态更新。使用此技术，您可以添加一些额外的功能来提醒用户，为活动区域提供控制，以及确定可以读取的新内容量，等等。借助 WAI-ARIA 的“活动”区域定义，您可以解决弹出窗口问题。清单 3 所示的窗口文本代码在清单 2 的基础上添加了一个 ARIA “活动”标记。
清单3： 弹出窗口中经过修改的文本部分
You should not be able to
<br />
drag this dialog
</p>
添加此 ARIA 标记之后，当窗口打开时，JAWS 10 等屏幕阅读器将能够察觉此事件，并且能够将消息读给用户。
要使用 WAI-ARIA 创建一个活动区域，您应该向带有“off”、“polite”、“assertive”或“rude”值的元素添加一个“aria-live”属性。我们也可以将这些值称作“礼貌级别”，它们指定了当元素值更新时屏幕阅读器的响应操作。
- aria-live="off"通知屏幕阅读器忽略更新的内容。它适用于响应不太重要的内容。
- aria-live="polite"会让屏幕阅读器将更新内容尽快通知给用户（需要等待用户完成当前任务）。屏幕阅读器可以通过声音提醒用户 Web 页面中出现了一些更新。用户可以选择直接跳转到更新区域，或者忽略更新并在稍后处理它。“polite”是内容更新最常用的值之一，特别是对于状态通知、天气或股票更新、聊天消息这样的事件。
- aria-live="assertive"会让屏幕阅读器将更新内容立即提醒用户，并且用户必须阅读这些消息。其中的一个例子就是错误消息。
- aria-live="rude"用于被认为是非常重要的更新。这个值会将更改立即通知给用户，并设置关注区域，要求用户输入信息或采取措施。
借助 WAI-ARIA 活动区域，您可以将所有动态更改或更新的内容划分为若干标准级别，并决定如何通知用户并与用户交互。
增强的键盘可访问性
在 HTML 中，只有链接和表单字段可以接收键盘关注，这意味着用户可以使用 Tab 键来对这些元素设置关注。但是，在 Web 2.0 应用程序中，这种基本行为并不够。举例来说，应用程序可能需要关注显示重要消息的<span> 或<div>。通常，几乎所有的 HTML 元素都可以使用 JavaScript 等脚本语言来接收关注。但是，这些元素不能由屏幕阅读器或只使用键盘的用户访问。
WAI-ARIA 能够增强键盘可访问性。它允许所有的 HTML 元素接收键盘关注，因为 ARIA 扩展了 tabindex属性作用域。您可以将 tabindex属性指定给任何 HTML 元素。
表 3 显示了 tabindex属性的用法：
| Tabindex属性 | 关注（Focus） | Tab Order |
| 无 | 默认关注行为（只有表单控件和链接可以接受关注） | 遵循默认的选项卡顺序 |
| Tabindex = "0" | 可以通过鼠标、键盘和 JavaScript 来进行关注 | 取决于元素在文档中的位置 |
| Tabindex="X"（其中，X 是 1 到 32768 之间的正整数值） | 可以通过鼠标、键盘和 JavaScript 来进行关注 | 如果 tabindex值较小，则 tab 键顺序较高 |
| Tabindex="-1" | 仅能通过 JavaScript 进行关注 | 不是，但设计者可以使用 element.focus()进行关注（作为箭头键或其他键的触发事件） |
我们以<span> 为例。以下代码是 HTML 中的默认<span> 元素：
<span>span text here</span>
以下元素不能从鼠标或键盘接收关注；它只能通过使用 focus()方法来接收关注。
<span tabindex="0">span text here</span>
以下元素可以从鼠标或键盘接收关注。用户可以使用 tab 键来关注此元素，并且 tab 键顺序取决于元素在文档中的位置：
<span tabindex="1">span text
here</span>
以下元素不能使用 tab 键接收关注：
<span tabindex="-1">span text here</span>
将 tabindex设置为-1 意味着从 tab 序列中移除该元素。因此，您无法使用键盘或鼠标来关注此元素。但是，您仍然可以使用 focus()方法来关注它。
小部件可访问性
在 Web 2.0 中，小部件表示非 HTML 本机的组件，或通过 JavaScript 特性高度增强的组件。一些常见的 Web 2.0 网站中包括大量小部件，并且其中一些由于过于复杂而无法供残疾人使用。但是，可以通过一些解决方案来解决此问题。基本上，您应该启动键盘交互并尝试让屏幕阅读器知道小部件是什么以及它的当前状态和属性。图 5 显示了一个复合框小部件。
图 5.复合框小部件
复合框允许用户在字段中键入值，同时也可以从列表中选择预先定义的值。复合框是一个结合了以下功能的小部件：
- 一个可编辑的文本字段
- 一个下拉按钮
- 一个弹出项列表
复合框的交互步骤如下：
- 文本字段应该位于 tab 序列中。
- 按下向下键时，应该显示弹出列表。
- 用户可以通过使用向上和向下键来更改列表中的选项。
- 用户按下 Enter 键可以将所选项目输入到文本字段中。
- 当用户在文本字段中键入字符时，使用自动完成特性。
实现这些键盘特性并不困难，但是要将此小部件的属性通知给屏幕阅读器就不是一件很容易的事。使用 ARIA 的 Roles、States 和 Properties 属性，您可以让可访问技术知道小部件的属性和当前状态。
- 包含 3 个复选框项目的 outer wrap 组件应该属于“combobox”角色。
- 下拉按钮应该是一个 HTML 按钮，或者应该属于“button”角色。
- 弹出项目列表应该包含一个 role="list"。
- 列表中的每个项目应该包含一个 role="listitem"。
- 如果文本字段不可编辑，则必须包含 aria-readonly="true"。
- 提供一个标签，它通过引用复合框中的文本字段来标识复合框。
通过键交互和 ARIA 支持，支持 ARIA 的浏览器和屏幕阅读器将能够帮助残疾人访问此复合框小部件。清单 4 中的代码是图 5 所示复合框的呈现了 Dojo 的 HTML 代码，并且它展示了 Dojo 如何使用 ARIA 来增强小部件可访问性。
清单 4.可访问复合框定义
<label id="combo1_label" name="ComboBox" for="combo1"> ComboBox: </label>
<div aria-expanded="false" aria-labelledby="combo1_label"
widgetid="combo1" role="combobox"
class="dijit dijitReset dijitInlineTable dijitLeft dijitComboBox"
id="widget_combo1"
dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse"
dojoattachpoint="comboNode" wairole="combobox" tabindex="-1">
<div style="overflow: hidden;">
<div role="presentation"
class="dijitReset dijitRight dijitButtonNode dijitArrowButton
dijitDownArrowButton dijitArrowButtonActive"
dojoattachpoint="downArrowNode" wairole="presentation"
dojoattachevent="onmousedown:_onArrowMouseDown,onmouseup:_onMouse,
onmouseenter:_onMouse,onmouseleave:_onMouse">
<div class="dijitArrowButtonInner">?</div>
<div class="dijitArrowButtonChar">▼</div>
</div>
<div class="dijitReset dijitValidationIcon"><br>
</div>
<div class="dijitReset dijitValidationIconText">Χ</div>
<div class="dijitReset dijitInputField"><input
aria-owns="combo1_popup" value="one" tabindex="0" id="combo1"
aria-invalid="false" aria-autocomplete="list" aria-haspopup="true"
role="textbox" name="combo1" autocomplete="off" class="dijitReset"
dojoattachevent="onkeypress:_onKeyPress,compositionend"
dojoattachpoint="textbox,focusNode" wairole="textbox"
waistate="haspopup-true,autocomplete-list" type="text"></div>
</div>
</div>
当用户使用这个 Dojo 复合框时，屏幕阅读器会显示“按向下或向上箭头来切换项目”。
结束语
当然，我们无法在本文中涵盖所有可访问性问题。但是，如果您知道问题所在，则可以找到一些方法来确保 Web 2.0 应用程序的可访问性。在 WCAG 2.0 之前，解决方案是各不相同的，并且一些常见问题都没有标准的解决方案。借助 WCAG 2.0，您可以使用一些常见的特性来确保应用程序可以访问。根据这些已有标准来设计应用程序将帮助您把功能提供给最广泛的受众，甚至适用于最新的 Assistive Tools。