Web 2.0 技术中的可访问性 -3 更新

look_w

动态内容更新内容更新是一个最具有典型性的 Web 2.0 特性。使用 Ajax 技术，可以只更新页面的一些部分，而不用刷新整个页面。但是，这种更新可能会导致一些可访问性问题，因为在更新发生时很难提醒残疾用户。并不是因为我们无法提示更改；JavaScript 代码和其他方法都可以捕获它们。但是，并非所有的消息和更改都是面向用户的；其中一些是页面的操作，而将这些事件通知给用户是不合适的。使用传统技术则很难确定应该将哪些更改提醒给用户。
在使用 WAI-ARIA 之前，JAWS 这样的屏幕阅读器可以读取受关注元素的消息或文本，以及一些具有 “for” 属性的标签。在 HTML 中，只有链接和表单元素可以接收键盘关注。通常，可接收关注的元素表示它们可以被操作。但也有一些纯信息元素无法接收关注，但却需要将它们通知给用户。图 4 显示了一个 Dojo 弹出窗口，其中包含一条提醒消息。
图 4. 带有一条消息的 Dojo 弹出窗口窗口打开后，屏幕阅读器无法通知用户打开了一个带消息的窗口。此窗口还锁定了窗口区域外部的其他窗口部分。这会导致用户无法控制 Web 页面，且无法阅读任何内容。清单 2 显示了此弹出窗口的源代码。
清单 2. 弹出窗口的源代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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. 弹出窗口中经过修改的文本部分

1 2 3 4 5

<p aria-live="assertive">          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 属性的用法：
表 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> 元素：

1	<span>span text here</span>

以下元素不能从鼠标或键盘接收关注；它只能通过使用 focus() 方法来接收关注。

1	<span tabindex="0">span text here</span>

以下元素可以从鼠标或键盘接收关注。用户可以使用 tab 键来关注此元素，并且 tab 键顺序取决于元素在文档中的位置：

1 2	<span tabindex="1">span text here</span>

以下元素不能使用 tab 键接收关注：

1	<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. 可访问复合框定义

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<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 复合框时，屏幕阅读器会显示 “按向下或向上箭头来切换项目”。