The Public Interface

As web applications become more interactive, maintaining accessibility can become a challenge. Screen readers typically read content sequentially, making it difficult to convey updates that occur asynchronously. ARIA live regions allow developers to notify users about these updates effectively.

In this tutorial, we’ll explore how to make interactive websites more accessible using ARIA live regions. I’m using VoiceOver on MacOS and Safari to test this tutorial.

I’ve created a basic weather application that fetches data from Open-Mateo. The application updates a span element with the fetched temperature data.

Currently, when using a screen reader, clicking the button does not announce any changes. This is where ARIA live regions become essential.

The aria-live attribute specifies an element as a live region, instructing screen readers to announce any content changes within that region. The attribute has three possible values.

So we can mark our p tag as an ARIA live region by adding the aria-live=polite attribute.

Now, when the “Get Weather” button is clicked, the screen reader will announce the contents of the span element:

loading…

30.1 degrees.

To instruct the screen reader to read the entire contents of the p tag rather than just the span, add the aria-atomic attribute to the live region:

The aria-atomic attribute can be set to true or false. The screen reader will traverse up the DOM tree from the changed element until it hits either the aria-live region, or the aria-atomic=true attribute. If the aria-atomic=true attribute is found, it will read the contents of that element instead of just the one that was updated.

Now after selecting “Get Weather” the reader will read out:

The current temperature is loading…

The current temperature is 30.1 degrees.

Right now, if the text content is updated with the result before the screen reader finishes reading “The current temperature is loading…” it will cut off and just read out the result. The aria-busy attribute can help manage this by muting updates until the final content is ready.

We can set this attribute with JavaScript in our event handler.

Now the screen reader will be muted during the loading state changes and will just read the updated message.

The current temperature is 30.1 degrees.

Ensuring accessibility in dynamic web applications can be complex. ARIA live regions provide a powerful tool to convey real-time updates to screen reader users.…