ARIA: aria-busy attribute

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 an ARIA live region with the aria-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 with aria-live="assertive", you don't want to interrupt the user multiple times as different parts of the content load. This is where aria-busy can help.

The aria-busy property is an optional property of live regions that can have the value true or false. The aria-busy attribute with a value of true 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 the ariaBusy property of the object to change the value to false when downloading is complete.

ariaLiveElement.ariaBusy = "false";

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

If an element with feed role has aria-busy set to true, the rendering changes that occur inside the feed will not be announced with the exception of user-initiated changes.

If changes to a rendered widget would create a state where the widget is missing required owned elements during script execution, set aria-busy to true 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.

false (default):

There are no expected updates for the element.

true

The element is being updated.

Element.ariaBusy

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

<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

Used in ALL roles

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