Using aria-owns with late-mounted descendants

Marcelo Paiva — Thu, 20 Jul 2023 13:24:10 +0000

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 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 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 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 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.

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.

WCAG 2.1 Checklist with Filter and Links

Marcelo Paiva — Fri, 16 Jun 2023 17:45:01 +0000