aria-busy

ARIA 实时区域 中使用,全局 aria-busy 状态指示正在修改元素,辅助技术可能需要等待更改完成,然后才通知用户有关更新的信息。

当实时区域的多个部分需要在向用户宣布更改之前加载时,请将 aria-busy="true" 设置为 true,直到加载完成。然后将其设置为 aria-busy="false"。这可以防止辅助技术在更新完成之前宣布更改。

描述

有一个内容部分会更新。这些更新很重要,您希望在内容修改后让用户知道,因此您已将其转换为 ARIA 实时区域,并使用 aria-live 属性。您可能希望同时更新该部分的多个组件,但您无法确定所有内容是否会同时更新。即使这是一个非常重要的实时区域,并且 aria-live="assertive",您也不希望在内容的不同部分加载时多次中断用户。这就是 aria-busy 可以提供帮助的地方。

aria-busy 属性是实时区域的可选属性,其值可以为 truefalsearia-busy 属性的值为 true 可添加到当前正在更新或修改的元素中,以通知辅助技术应等待修改或更改完成,然后才将内容显示给用户。使用 ariaBusy 对象属性将值更改为 false,当下载完成时。

js
ariaLiveElement.ariaBusy = "false";

aria-live 的值决定了更改是在值更改为 false 时立即宣布,还是辅助技术等待当前任务完成,然后才中断用户。

feed

如果具有 feed 角色的元素将 aria-busy 设置为 true,则提要内发生的呈现更改将不会被宣布,除非用户发起的更改。

widget

如果对渲染小部件的更改会创建小部件在脚本执行期间缺少必需的拥有元素的状态,请在更新过程中将 aria-busy 设置为 true,用于小部件。例如,如果渲染的树状网格更新了多个分支,而这些分支并非一定会在同一时间渲染,则替代完全替换整个树的方法是,在修改每个分支时标记树为繁忙。

false(默认)

该元素没有预期的更新。

true

该元素正在更新。

关联接口

Element.ariaBusy

作为每个元素接口一部分的 ariaBusy 属性反映了 aria-busy 属性的值,该属性指示元素是否正在被修改。

html
<div
  id="clock"
  role="timer"
  aria-live="polite"
  aria-atomic="true"
  aria-busy="false"></div>
js
const el = document.getElementById("clock");
console.log(el.ariaBusy); // false
el.ariaBusy = "true";
console.log(el.ariaBusy); // true

关联角色

所有 角色中使用

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-busy
可访问的富互联网应用程序 (WAI-ARIA)
# aria-busy

另请参阅