Thearia-busy attribute is a global ARIA state that indicates whether an element is currently being modified.It helps assistive technologies understand that changes to the content are not yet complete, and that they may want to wait before informing users of the update.Whilearia-busy is commonly used inARIA live regions to delay announcements until updates are complete, it can also be used outside of live regions—for example, in widgets or feeds—to signal ongoing changes or loading.

When multiple parts of a live region need to be loaded before changes are announced to the user, setaria-busy="true" until loading is complete. Then set toaria-busy="false". This prevents assistive technologies from announcing changes before updates are done.

Description

There is a section of content that updates. The updates are important and you want to let the user know when it has been modified, so you have converted it into anARIA live region with thearia-live attribute. You may want to update several components of that section at the same time, but you can't be sure that everything will update simultaneously. Even if it is a very important live region witharia-live="assertive", you don't want to interrupt the user multiple times as different parts of the content load. This is wherearia-busy can help.

Thearia-busy property is an optional property of live regions that can have the valuetrue orfalse. Thearia-busy attribute with a value oftrue can be added to an element currently being updated or modified, to inform the assistive technology that it should wait until the modifications or changes are complete before exposing the content to the user. Use theariaBusy property of the object to change the value tofalse when downloading is complete.

ariaLiveElement.ariaBusy = "false";

aria-live's value dictates whether the changes are announced immediately upon changing the value tofalse, or the assistive technology waits until the current task is complete before interrupting the user.

Within afeed

If an element withfeed role hasaria-busy set totrue, the rendering changes that occur inside the feed will not be announced with the exception of user-initiated changes.

Within awidget

If changes to a rendered widget would create a state where the widget is missing required owned elements during script execution, setaria-busy totrue on the widget during the update process. For example, if a rendered tree grid updates multiple branches not necessarily rendered simultaneously, an alternative to replacing the whole tree in a single update would be to mark the tree busy while each of the branches is modified.

Values

false (default):

There are no expected updates for the element.

true

The element is being updated.

Associated interfaces

Element.ariaBusy

TheariaBusy property, part of each element's interface, reflects the value of thearia-busy attribute, which indicates whether an element is being modified.

<div   role="timer"  aria-live="polite"  aria-atomic="true"  aria-busy="false"></div>

const el = document.getElementById("clock");console.log(el.ariaBusy); // falseel.ariaBusy = "true";console.log(el.ariaBusy); // true

Associated roles

Used inALL roles

Specifications

See also

• ARIA live regions
• aria-live
• aria-relevant
• aria-atomic