WAI-ARIA实时区域（ Live Regions）

Jace

14年 ago

———————————————————————-

注：这篇文章的内容已过时，请查看《WAI-ARIA Live Regions[更新]》

———————————————————————-

原文：WAI-ARIA Live Regions

作者：Gez Lemon

摘要

使用WAI-ARIA的实时区域（live regions）将能够解决大多与ajax相关的无障碍问题。实时区域（live regions）能够将更新内容通知给辅助技术，如屏幕阅读器，而且不会失去他们在内容中的位置。

无障碍富互联网应用

今天的许多Web应用都将残疾人士排除在外，因为目前的技术在传达重要信息方面能力不足。富互联网应用（RIA）通常使用多种技术，如 HTML，CSS和javascript，但往往不能提供足够的语义，因此，web应用对残疾人士难以使用，或者完全不能访问。W3C 的无障碍网页倡议-无障碍富互联网应用（ WAI-ARIA）套件包括一个路线图，概述了使RIAs无障碍的要求。路线图计划开发使RIAs无障碍所必要的角色（roles）、状态和属性（states and properties）。路线图定义了AJAX实时区域（live regions），以确保在更新执行时，辅助技术能够正确地处理它们。实时区域能够大大提高基于ajax的web应用程序的可及性。

Live Region属性

AJAX Live Region允许文本在没有获得焦点的时候被读出。这是个喜讯，因为它意味着用户可以感知多个更新信息，而且不会失去在文档中的位置。下面是与AJAX Live Regions相关的属性，详情请参见 States and Properties ：

`atomic`属性

atomic属性是live regions 的可选属性，取值为true或false （默认）。atomic属性表示当有区域更新时辅助技术是将全部还是仅变化区域部分呈现给用户。如果此属性设置为true ，辅助技术应该将整个区域作为一个整体来呈现，否则，只将变化区域公布。

<ul id="lr" aaa:atomic="true" aaa:live="polite">
  <li id="lir1">Item 1</li>
  <li id="lir2">Item 2</li>
  <li id="lir3">item 3</li>
</ul>

当一个节点发生变化时，辅助技术寻找第一个显式设置了atomic属性的祖先，并采取以下一种行为，行为取决于是否设置了该属性和设置的属性值：

case1: 如果所有祖先都没有显式设置atomic属性，辅助技术只需将变化的节点呈现给用户。
case2: 如果atomic属性显式设置为false ，辅助技术可以停止搜寻祖先链，并只需将变化的节点呈现给用户。
case3: 如果atomic属性显式设置为true ，那么辅助技术应该呈现设置这个atomic属性的整个子树。

`controls`属性

controls属性接受IDREFS （由空格分隔的文档唯一标识引用列表），引用受当前元素控制的元素。

<input id="bc" type="button" aaa:controls="lr" value="Update"/>
...
<p id="lr" aaa:live="polite">Initial Content</p>

如果所有受controls属性影响的目标对象的live属性值为off ，辅助技术可以依此只提示区域有更新，但并不提示具体更新内容。

`describedby`属性

describedby属性接受IDREFS，即描述小部件（widget）的引用元素。label元素应说明小部件的实质作用，describedby属性提供一些用户可能需要的额外信息。在没有describedby时，HTML的 label和表格单元格头（headers）被认为是describedby的默认值。有关此概念背后的基本原理的更多信息请参见XForms”帮助或提示” (help or hint)。

<p id="lbl">Label for live region</p>
...
<p id="lr" aaa:labelledby="lbl" aaa:describedby="desc" aaa:live="polite">
Initial Content
</p>
...
<p id="desc">
Long description for live region
</p>

`labelledby`属性

labelledby属性接受IDREFS，即指向标记小部件的元素。与describedby属性不同，它提供了额外的信息，label（s）应提供小部件的本质作用。

<p id="lbl">Label for live region</p>
...
<p id="lr" aaa:labelledby="lbl" aaa:live="polite">
Initial Content
</p>

`live`属性

live属性的值可取off （默认）， polite ， assertive ，或rude 。

off

这是默认值，表明该区域不是实时的。

<p id="lr" aaa:live="off">Initial Content</p>

polite

这是对实时区域的正常操作和默认行为。直到用户完成当前的活动时才做出响应。

<p id="lr" aaa:live="polite">Initial Content</p>

assertive

此值的优先级比normal高，但不一定马上中断用户。

<p id="lr" aaa:live="assertive">Initial Content</p>

rude

这个值的优先级最高，通常会中断用户。这可能会使用户迷失方向，使他们不继续做当前的任务，因此只应在绝对必要时使用该方案。

<p id="lr" aaa:live="rude">Initial Content</p>

`relevant`属性

relevant属性是可选项，用来表示一个区域内与变化相关的区域。relevant属性接受以下属性值，属性值之间以空格分隔：

additions: 添加到区域内 DOM中的节点
removals: 从区域内DOM中删除的节点
text: 添加到DOM或从DOM中删除的文本
all: 以上全部（ additions ， removals ， text ）

在没有显式设置relevant属性时，默认是假设设置了文本变化和增加（ aaa:relevant="text additions" ）。

<li id="lr" aaa:relevant="text" aaa:live="polite">Initial Content</li>

一致性

WAI-ARIA的状态和属性模块不是一个独立的模块，拟与一种主机语言（host language）共同使用，例如，与 XHTML 1.1一起使用，需设置WAI-ARIA的命名空间：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:aaa="http://www.w3.org/2005/07/aaa"
      lang="en">

这意味着，包括实时区域属性的文档应被视为application/xml+xhtml 。当标记中声明了该属性，他们应该使用WAI-ARIA命名空间前缀，如aaa:live 。如果将该属性插入到脚本中，则应该使用setAttributeNS方法

objElm.setAttributeNS('http://www.w3.org/2005/07/aaa', 'atomic', 'yes');
objElm.setAttributeNS('http://www.w3.org/2005/07/aaa', 'live', 'polite');

未来

AJAX实时区域将使Web应用程序对用户代理的支持更具亲和力。目前，规范仍处于草案状态，但幸运的是，最新版本中，Charles做了一些测试案例，演示了实时区域如何与Fire Vox 一起工作，并预测了未来的发展。感谢Charles。

摘要

目录

无障碍富互联网应用

Live Region属性

atomic属性

controls属性

describedby属性

labelledby属性

live属性

relevant属性

未来