Skip navigation

ARIA live regions, explained.

Published 2021/08/03 14:00

What are "live regions" and how can they make my interactive website more accessible?

Let's explain

Let's suppose you've made a website. This website is interactive. There's a dropdown of programming languages and a Go button

The Go button displays information about the selected language below.

Demo: https://live-region-test.netlify.app/

There is a problem however with how screen readers interpret this page.

Notice what happens after the user clicks on the Go button:

Nothing gets announced after the Go button is clicked. The screen reader user has no idea that the text below has been updated.

How can we fix this?

Let's have a look at the HTML code. The Javascript and CSS code have been left out because they're irrelevant.

You can see the <select> tag which is the dropdown, the <button> element and a div with ID "description" which updates with the selected programming language details:

<div id="app">
    <select id="language-selection">
        <option value="none">-- Select a language --</option>
        <option value="javascript">Javascript</option>
        <option value="python">Python</option>
        <option value="java">Java</option>
        <option value="html">HTML</option>
    </select>

    <button id="go-button">Go</button>

    <div id="description">
        <span id="text"></span>
    </div>
</div>

How can we make sure that every time the description changes, the changes get announced by the screen reader?

We can solve this by using an ARIA "live region".

With a live region, our HTML should look like this:

<div id="app">
    <select id="language-selection">
        <option value="none">-- Select a language --</option>
        <option value="javascript">Javascript</option>
        <option value="python">Python</option>
        <option value="java">Java</option>
        <option value="html">HTML</option>
    </select>

    <button id="go-button">Go</button>

    <div id="description" role="region" aria-live="polite">
        <span id="text"></span>
    </div>
</div>
  • the role="region" parts marks that specific area as significant
  • aria-live marks this area as "live", which is to say that it will be updated.
  • "polite" means announce the change only when the user isn't doing something else.

So now our page would look something like this with a screen reader:

Now the screen reader announces to the user every time there's a change!

And that's how live regions work. Thanks for reading!

Explained (28 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hosting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
2021 Savvas Stephanides
Buy me a coffee
Some icons from Freepik