Using aria-owns with late-mounted descendants
Tags: codepen, ariaowns, aria, activedescendant
Published: 2023-07-20 13:24:10

This post was created to explain how the use of a combination of ARIA attributes can help web developers keeping track of the loading state of a descendant element.

Review W3C [GitHub issue](https://github.com/w3c/aria/issues/1970) for more context.


## Using `aria-busy` to track descendant elements status with `aria-activedescendant`

When developing accessible web applications, it is crucial to ensure that the user interface provides accurate and up-to-date information to assistive technologies. 

One common scenario is when a parent element manages the status of its descendant elements dynamically. In such cases, using ARIA attributes like `aria-busy` and `aria-activedescendant` can be helpful in conveying the loading status and active descendant information to users.

## Scenario: Flight Status List

Let's consider a flight status page as an example. 

We have two lists: "**Expected Flights**" and "**Arrivals**". The expected flights list initially displays flight information, and as flights land, the items move to the arrivals list. We want to ensure that the loading and transition states are communicated effectively to assistive technologies.

```html
<!-- HTML code snippet -->
<div id="expectedFlightsList" role="listbox" aria-owns="flight1 flight2 flight3 flight4 flight5" aria-activedescendant="activeFlight"></div>
```
In the above code, we have a parent element with the ID `expectedFlightsList`. The `aria-owns` attribute specifies the IDs of the expected flight elements. The `aria-activedescendant` attribute is initially set to `activeFlight`, which will indicate the active or focused descendant within the listbox.

To handle the loading and transition states, we utilize the `aria-busy` attribute:

```javascript

// JavaScript code snippet
const flightItem = mountFlight(flight);
flightItem.setAttribute('aria-busy', 'true');
// ... after flight is loaded ...
flightItem.setAttribute('aria-busy', 'false');

```

In the JavaScript code, we set the `aria-busy` attribute to "true" when a flight is being loaded and then update it to "false" when the flight has been mounted. This informs assistive technologies that the specific flight element is currently undergoing loading or updating.

As flights transition from the expected flights list to the arrivals list, we update the `aria-activedescendant` attribute accordingly:

```javascript

// JavaScript code snippet
flightItem.setAttribute('aria-selected', 'true');
expectedFlightsList.setAttribute('aria-activedescendant', '');


```

By updating the aria-selected attribute of the active flight item and clearing the `aria-activedescendant` attribute on the expected flights list, we ensure that the assistive technologies are aware of the active descendant change.

These combined uses of `aria-busy` and `aria-activedescendant` help provide accurate and meaningful information to assistive technologies and users as flights are loaded and transitioned. It enables users relying on screen readers or other assistive technologies to follow the dynamic changes effectively.







## Demo
I created a simple demo on codepen to illustrate this issue and test how assistive technologies may announce the state of each descendant element. 

{% codepen https://codepen.io/mpaiva/pen/VwVdzBW %}

## Conclusion

The usage of ARIA attributes like `aria-busy` and `aria-activedescendant` allows web developers to enhance accessibility by providing real-time information about loading states and active descendants. 

By leveraging these attributes appropriately, developers can ensure that their web applications are more inclusive and provide a smooth experience for all users.