aria-busy
在 ARIA 实时区域 中使用,全局 aria-busy
状态指示正在修改元素,辅助技术可能需要等待更改完成,然后才通知用户有关更新的信息。
当实时区域的多个部分需要在向用户宣布更改之前加载时,请将 aria-busy="true"
设置为 true,直到加载完成。然后将其设置为 aria-busy="false"
。这可以防止辅助技术在更新完成之前宣布更改。
描述
有一个内容部分会更新。这些更新很重要,您希望在内容修改后让用户知道,因此您已将其转换为 ARIA 实时区域,并使用 aria-live
属性。您可能希望同时更新该部分的多个组件,但您无法确定所有内容是否会同时更新。即使这是一个非常重要的实时区域,并且 aria-live="assertive"
,您也不希望在内容的不同部分加载时多次中断用户。这就是 aria-busy
可以提供帮助的地方。
aria-busy
属性是实时区域的可选属性,其值可以为 true
或 false
。aria-busy
属性的值为 true
可添加到当前正在更新或修改的元素中,以通知辅助技术应等待修改或更改完成,然后才将内容显示给用户。使用 ariaBusy
对象属性将值更改为 false
,当下载完成时。
ariaLiveElement.ariaBusy = "false";
aria-live
的值决定了更改是在值更改为 false
时立即宣布,还是辅助技术等待当前任务完成,然后才中断用户。
在 feed
内
如果具有 feed
角色的元素将 aria-busy
设置为 true
,则提要内发生的呈现更改将不会被宣布,除非用户发起的更改。
在 widget
内
如果对渲染小部件的更改会创建小部件在脚本执行期间缺少必需的拥有元素的状态,请在更新过程中将 aria-busy
设置为 true
,用于小部件。例如,如果渲染的树状网格更新了多个分支,而这些分支并非一定会在同一时间渲染,则替代完全替换整个树的方法是,在修改每个分支时标记树为繁忙。
值
关联接口
Element.ariaBusy
-
作为每个元素接口一部分的
ariaBusy
属性反映了aria-busy
属性的值,该属性指示元素是否正在被修改。
<div
id="clock"
role="timer"
aria-live="polite"
aria-atomic="true"
aria-busy="false"></div>
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 |