ARIA: aria-live 属性

描述

当内容在初始加载后发生更改时，辅助技术 (AT) 用户可能“看不到”这些更改。有些更改很重要，有些则不重要。aria-live属性使开发人员能够通知用户有关更新的信息，并根据重要性和紧急性选择是立即、主动还是被动地通知 AT 用户内容的变化。

如果屏幕的某个部分发生更新，并且其样式使其易于被注意到，那么大多数视力正常的用户通常会注意到实时更新。另一方面，屏幕阅读器一次只关注页面的一部分；而这一部分可能不是发生更新的地方。aria-live属性提供了一种方式，使开发人员能够根据开发人员设置的事件触发器（而不是用户发起的动作）来向 AT 公告此类更改，从而让 AT 用户意识到内容已发生更改。

html

<div id="announce" aria-live="polite"></div>

aria-live属性设置在一个空元素上。当页面发生更新时，带有该aria-live属性的空元素应该被更新，并包含一个简短的公告，告知用户已进行了更新。

html

<div id="announce" aria-live="polite">
  <p>This message is announced.</p>
</div>

当可访问性 API 识别到上方实时区域的更改时，它将根据属性的值公告该实时区域的内容。该元素不会获得焦点。

如果您希望读取实时区域的全部内容，请使用 aria-atomic。使用 aria-relevant 来仅定义需要重新读给用户看的更新部分。使用 aria-busy 来防止在更新仍在进行时进行公告。

选择`aria-live`值

由于一些辅助技术用户无法“看到”实时更新，因此aria-live属性用于定义用户应该

立即了解，
有机会时得知，并且
主动得知，但可以在他们选择关注更新区域时了解。

aria-live的值描述了用户代理、辅助技术和用户可以从实时区域期望的更新类型，并用于表达重要程度。

当aria-live属性设置为polite时，辅助技术会通知用户更新，但通常不会中断当前任务，更新的优先级较低。当设置为assertive时，辅助技术会立即通知用户，可能会清除之前更新的语音队列。

屏幕阅读器会在页面加载时缓冲内容。因此，在初始可访问性树构建后添加的内容可能不会被注意到，因为 AT 用户在动态小部件填充之前就开始消费内容——用户可能不知道页面已更新或在小部件完成加载时查看内容更新。在这种情况下，您可以通过设置aria-live="polite"来告知用户页面已更新。

完全填充的页面也可能有更新。例如，实时体育比分、新闻爬虫和股票市场行情等内容。除非这些更新是页面的主要功能，否则您可能不希望每次更新都通知用户，但您确实希望告知他们小部件已更新。在这种情况下，您应该将aria-live设置为off。在这些场景中，除非用户专注于实时区域，否则没有理由通知用户更新。

有些实时更新非常重要且有时效性。例如，如果您正在销售演唱会门票，并且用户购买门票的时间有限，您不希望等到活动间歇期才告知他们时间快到了（或已经过了）。当需要尽快获得通知时，请将aria-live设置为assertive。如果更新的信息是 alert，则不需要aria-live属性。

在此有时限场景下，为了可访问性，您还需要提供一种方式让用户延长可用时间或完全关闭计时器。