We’re ARIA Live!

Mangfold i mai
Eric Eggert

Eric Eggert (he/him/his)

  • 🇩🇪 Co-founder & Co-owner of outline Consulting (2011)
  • 🇸🇪 Web Accessibility Specialist at Axess Lab (2022)
  • 🇦🇹 Lecturer at FH Joanneum (2015)
  • 🇺🇸 Director of Accessibility Services at Knowbility (’16–’22)
  • 🌏 Web Accessibility Specialist at W3C/WAI (’13–’20)

📍 Wissen, Germany 🇩🇪

ARIA Live Regions

Accessible Rich
Internet Applications

Live regions

Live regions are a way to give users feedback on actions they have taken through the accessibility API.

Accessibility API

Assistive technology has to be built to work with live regions.

Currently: Only screen readers.

WCAG SC 4.1.3
Status Messages

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

status message

change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors

status message

  • success or results of an action
  • waiting state of an application
  • progress of a process
  • existence of errors

Other ways for user feedback

  • Page Reload
  • Change of ARIA properties

Example: Page reload

See the Pen Minimal Form by Eric Eggert (@yatil) on CodePen.

No need for live regions if the page reloads (as it is a change of context).

Example: ARIA property (1)

See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.

No need for live regions as an aria property is changed.

Example: ARIA property (2)

See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.

No need for live regions as an aria property is changed.

Example: ARIA property (3)

See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.

No need for live regions as an aria property is changed.

Screen readers do not announce those changes

Similar: Change of the accessible name

See the Pen Play/Pause Button by Eric Eggert (@yatil) on CodePen.

Is programatically determinable. (But also not read by screen readers.)

Live regions use specific roles (but not role="region") & properties

Live regions are conveyed through AT

When to use Live Regions?

Live regions can be used when:

  • You need to communicate a whole sentence or set of information to users.
  • The message needs to be conveyed immediately.

Live region attributes


  • off (default)
  • polite: updates are presented at the next graceful opportunity: end of the current sentence or typing pauses
  • assertive: updates to the region have the highest priority and should be presented the user immediately


  • false (default): AT will present only the changed node(s)
  • true: AT will present the entire changed region as a whole, including the author-defined label if one exists.


  • false (default): no expected updates for the element
  • true: the element is being updated

When aria-busy is true, AT may ignore changes to content and then process all changes made during the busy period as a single, atomic update when aria-busy becomes false.


  • additions: Announce added nodes
  • removals: Announce removed nodes
  • text: Announce text nodes
  • all: equivalent to additions removals text

Default: additions text

Live region roles

alert, status, marquee, timer, log

Basically pre-configured aria live region property configurations.


Advisory information for the user that is not important enough to justify an alert; often but not necessarily presented as a status bar.


  • aria-live="polite"
  • aria-atomic="true"


Messages that may be immediately important to users.


  • aria-live="assertive"
  • aria-atomic="true"


Non-essential information that changes frequently. Needs an accessible name.


  • aria-live="off"


New information is added in meaningful order and old information may disappear.


  • aria-live="polite"


Contains a number which indicates an amount of elapsed time from a start point, or the time remaining until an end point.


  • aria-live="off"

Change of the accessible name with live region

See the Pen Play/Pause Button by Eric Eggert (@yatil) on CodePen.

Is programatically determinable and also read by screen readers.

Use an existing element if…

  • the status is also visible to users.
  • the conveyed text is equivalent to the visible text.

Example: Chat

Use a separate element
for status updates if…

  • you want to give users more context.
  • the output text has additional information that is not conductive to being announced.

Example: Carousel page confirmation

Some pitfalls!

There is no guarantee that
your live region is read.

AT might decide that your message is outdated & discard it.

Screen readers are unaware
of recently-added live regions

Do not add and update a live region immediately. Example: Immediate Live Regions

Beware of innerHTML shortcuts

Replacing all of the content might look the same visually but can be a different experience in a screen reader.
Example: Chat

Hidden live regions are not announced


  • display: none
  • visibility: hidden
  • hidden attribute

Use “visually hidden” instead


            .visually-hidden {
              border: 0;
              clip: rect(0, 0, 0, 0);
              height: 1px;
              margin: -1px;
              overflow: hidden;
              padding: 0;
              position: absolute;
              white-space: nowrap;
              width: 1px;

Note: This also means that you want to remove the text from the live region after a short delay to avoid users being able to navigate to it.

Live regions have no structure and cannot be navigated

Do not:

  • Wrap whole pages in a live region
  • Put long text into live regions (especially if unavailable otherwise)

Some screen readers might read
live regions in hidden windows or tabs

            const notifications = document.getElementById('notifications');

            document.addEventListener('visibilitychange', () => {
              let setting = document.hidden ? ['none', 'off'] : ['status', 'polite'];

              notification.setAttribute('role', setting[0]);
              notification.setAttribute('aria-live', setting[1]);

Source: Inclusive Components: Notifications

Best Practices

Is the message is important enough to be announced at all?

  • Critical information
  • Expected updates

Best Practices

Would a user want to interact with the announced element? If so, setting the focus can be the right thing to do.

Example: Carousel direct page choice

Best Practices

You can initialize general purpose region(s) on page load:

            var demo = document.createElement("div");
            demo.innerHTML = '
' + ''; document.querySelector('body').appendChild(demo);

Best Practices

Sometimes you want to use an audio cue (“earcon”) instead of a screen reader announcement.

Best Practices

Make sure equivalent information is available visually.

Example: WCAG Quick Reference

Wrap Up

  • role="alert"/role="status" are your friends (and sensible defaults)
  • Do not overuse live regions
  • Ensure visual information as well
  • Have live regions in the DOM early
  • Use other methods where appropriate

Thank you!

Eric Eggert