aria-live

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

如果屏幕的一部分更新，如果它的样式使其显眼，大多数视力正常的用户通常会注意到实时更新。另一方面，屏幕阅读器一次只关注页面的一个部分；并且该部分可能不是更新所在的位置。aria-live 属性为开发人员提供了一种方法，可以根据开发人员设置的事件触发器（而不是用户发起的操作）来向 AT 宣布此类更改，以便他们意识到内容已更改。

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

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

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

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

完全填充的页面也可能更新。例如，内容如实时体育比分、新闻滚动条和股票市场行情。除非此类更新是页面的主要功能，否则您可能不想在每次更新时都告知用户，但确实想告知他们小部件确实已更新。在此，您将设置 aria-live="off"。在这种情况下，没有理由在用户不关注实时区域时通知他们更新。

某些实时更新很重要且时间敏感。例如，如果您正在销售音乐会门票，用户只有有限的时间来购买，那么您不想等到活动间隙才告诉他们时间快到了（或已经过了）。当需要尽快告知时，请设置 aria-live="assertive"。如果更新的信息是 alert，则不需要 aria-live 属性。

在这种限时情况下，为了可访问性，您还需要为用户提供延长可用时间或完全关闭计时器的方式。

活动区域包括元素及其所有后代。当未设置更新内容时，aria-live 的值来自具有有效 aria-live 属性值设置的最近祖先。当设置为 off，或当在更新的元素和 DOM 树中的所有祖先节点上完全省略该属性时，不会通知用户。但是，如果用户导航到活动区域，他们仍然可以听到更新。

assertive

表示区域的更新具有最高优先级，应立即呈现给用户。

off (默认)

表示区域的更新不应呈现给用户，除非用户当前专注于该区域。

polite

表示区域的更新应在下一个合适的时机呈现，例如在说完当前句子或用户暂停键入时。

Element.ariaLive

ariaLive 属性是 Element 接口的一部分，反映了 aria-live 属性的值。

ElementInternals.ariaLive

ariaLive 属性是 ElementInternals 接口的一部分，反映了 aria-live 属性的值。

在**所有**角色中使用。

• aria-atomic
• aria-relevant
• aria-busy
• alert 角色