概要

6年前我写了一篇关于W3C的无障碍网页倡议-无障碍的富互联网应用程序 （WAI-ARIA）中的live region属性的文章（译文地址），WAI-ARIA规范在这段时间发生了显著变化，那篇文章中的一些细节现在已经过时了。那篇文章中的例子需要使用XHTML的命名空间，现在HTML5已支持WAI-ARIA了。

富互联网应用

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时，往往把残疾人士抛在脑后，因为这些应用程序无法提供被辅助技术理解所需的语义信息。可悲的是，过去几年里这种情况并没有多少改变，其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义，以确保富互联网应用是可以理解的，并且现在已经得到相对较好的支持。

WAI-ARIA规范解决的一个重大问题是页面的部分内容已更新，但使用辅助工具的用户并未得到通知，使用live region可以解决此问题。

实时区域（live regions）

使用辅助工具的用户通过live region可以获知文档的变更部分，而且焦点仍保留在当前活动中。例如，报读一个表中的动态更新的股票信息。live region也可用于帮助理解复杂的小部件（widget）。例如，汉斯·希伦使用一个隐藏的live region来报读返回的条目数目，参见他的自动完成部件例子，根据指示使用光标键来浏览整个列表，如果此时没有这个语境信息，自动完成的效果就不会如此好。下面的属性用于定义一个实时区域。

aria-live 属性

aria-live 属性表示该区块内的内容是实时的，内容的详细变化都会报读。可以使用下面的值来确定详细度（verbosity）。

aria-live=”off”

默认值，表明一个区域不是实时的，不会报读变化。

aria-live=”polite”

更新内容应当在适当时刻报读，比如在用户停止输入时。

aria-live=”assertive”

立即向用户报读更新内容。由于这是突兀的， assertive值应当仅用于更新内容是重要的，应立即通知给用户的情况。

在下面的例子中，无序列表中的文本的变化或增加，都将通知给用户。

使用aria-live=”polite”

<ul aria-live="polite">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>item 3</li>
</ul>

aria-atomic属性

aria-atomic属性是一个可选属性，其值可以是true或false（默认值）。当区域内有更新时，使用atomic属性来指示辅助工具应当报读变化区域的部分内容还是全部内容，并受aria-relevant 属性的影响。 如果aria-atomic属性值为true ，辅助技术应该将整个区域作为一个整体来呈现，否则，只将变化区域公布。

有时，更新内容本身是有意义的，比如在聊天程序中对方发来的一条新消息。但有些内容的变化如果脱离区域内其他部分的上下文环境则无法理解。在这种情况下，aria-atomic=”true”应该设置在相关的容器上，这样该区域就会被当作为一个整体对待。在下面的例子中，div元素中的任何地方发生变化，都会将整块内容报读给用户。

将区域作为一个整体报读

<div aria-live="polite" aria-atomic="true">
  <h3>Currently playing</h3>
  <p>Jake Bugg - Lightening Bolt</p>
</div>

aria-relevant属性

aria-relevant属性是一个可选属性，用于指示区域内何种类型的更新应当报读给用户。aria-relevant属性接受以下属性值，属性值之间以空格分隔：

aria-relevant=”additions”

区域内DOM中插入元素时应当报读

aria-relevant=”removals”

区域内DOM中移除元素时应当报读

aria-relevant=”text”

往DOM中添加或从DOM中移除文本时应当报读

aria-relevant=”all”

上述类型发生时

未明确设置aria-relevant属性时，默认值为文本变化和新增元素（ aria-relevant=”text additions” ）。在下面的例子中，只有在无序列表中新增元素时才通知给用户。

区域内新增元素时报读

<ul aria-live="polite" aria-relevant="additions">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>item 3</li>
</ul>

aria-busy属性

aria-busy属性适用于该区域正忙于更新，在完成更新之前，停止播报更新内容。设置了aria-busy=”true”的区域会停止报读更新，直到移除该属性或属性值更改为false 。辅助工具收集这些更新，并在该区域不再忙碌时朗读它们。在下面的示例中，无序列表的列表项在载入过程中并不会被朗读。当开发者设置了aria-busy=”false”或删除aria-busy属性时，无序列表才会被播报。

在区域忙碌时暂时停止播报更新内容

<ol aria-live="polite" aria-busy="true">
⋯
</ol>

具有实时区域的角色

WAI-ARIA定义了一些具有实时区域的角色。

alert角色

alert角色用来提供需要立即通知给用户的重要信息。alert角色是一个属性值为assertive的实时区域，这意味着该消息将被立即传送到用户。

alert角色

<div role="alert">
  Maximum amount reached.
</div>

status角色

status角色用来向用户提供告知信息，这些信息的重要程度不足以使用alert。status角色有一个隐含的aria-live属性，其值为polite ，但是这并不意味着它会向用户朗读。开发者可以在区域上使用aria-live属性覆盖辅助工具通常处理的方法。

status角色

<div role="status">
  3 new messages in inbox.
</div>

timer角色

timer角色标志着一个区域内含有一个计数器，记录着已消逝的或还剩余的时间，随着时间的变化而更新，直到计时器暂停或者时间计数已完成。timer角色有一个隐含的aria-live属性，其值为off 。

timer角色

<div role="timer">
  29
</div>

marquee角色

非重要信息有规律的发生变化时，可以使用marquee角色 。marquee是一个aria-live值为polite 的实时区域。如果你使用marquee的话，务必要提供一个简单的方式来停止滚动和更新，因为它可能使人分心和烦躁。

marquee角色

<div role="marquee">
  Marquee text.
</div>

log角色

log角色适用于在记录（log）的结尾添加新信息的区域，旧的信息可能从记录中消失，如聊天记录或错误控制台中的消息。log角色的隐含属性aria-live值为polite 。如果一个文本域用于向设置了角色为log的区域发送更新内容，应当使用aria-controls属性定义它们的关系。

log角色

<div role="log" id="chatarea">
  <span>Dave: </span> What time will you be finished?
</div>
⋯
<div>
  <label for="chat">Chat: </label>
  <input aria-controls="chatarea"
         type="text" 
         size="40" 
         name="chat" 
         id="chat">
</div>

有关WAI-ARIA实时区域的更多信息，请参阅WAI-ARIA创作实践指南中的管理动态变化。

———-

原文：Gez Lemon，WAI-ARIA Live Regions Updated