Effective live regions to convey the loading state of your web app

Summary

Single Page Applications have a rocky history with web accessibility. Dynamically loading page content won't be outputted by assistive technology without using an aria live region. But just adding a live region alone isn't the end of the problem, any text to describe the loading needs to be continuously communicated for the length of time the loading is taking place.

I'll show you a technique how to use an aria live region effectively, the pitfalls to avoid and how this simple pattern can be used to great effect to describe your web app's loading state.

Resources

• Check out the Repository