1

I've already found this question, which got me halfway: How to label a loading animation for WAI-ARIA?.

With the suggestions in that thread (adding role="alert" aria-busy="true" to the loading animation div), it now announces "busy" once the long-running operation starts - good. Once the query and processing is complete, this loading div gets replaced by a table of results. How can I also alert on the completion of the operation?

Benjin
  • 2,264
  • 2
  • 25
  • 50

1 Answers1

0

Add aria-live="polite" and role="region" to the container where your content changes in.

Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.

With the region role you signify the importance of the element. And with aria-live="polite" you notify the user, but without interrupting whatever the screenreader is saying at the moment.

<div role="region" aria-live="polite">
    // User is notified when the content changes here.
</div>

For more information check MDN - aria-live MDN - role-region

Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • Yup, looks like wrapping the table in a new region is the way to go. It's currently deleting the loading div and replacing it with a new content div, but `aria-live` announcements don't happen upon instantiation of itself. – Benjin Aug 23 '19 at 22:41