Modern websites are alive with constant updates. Data is loaded, search results are presented, error messages appear, all while the user remains on the same page. What’s important to realize is that many users rely on how well assistive technologies pick up these changes. A typical example is a user with visual impairment who listens to announcements from a screen reader. Screen readers announce navigation to a new page automatically, but dynamic updates to the current page will pass unnoticed unless they are presented in live regions.

This post is a continuation of my previous post: Common mistake: Communicating UI updates only to sighted users. I am returning to this topic because I see the same mistake repeatedly being made. It’s one that’s hard to detect, because if you inspect the message that has appeared, the markup looks right. So why is nothing being read by the screen reader? Here’s what a lot of developers miss:

A live region needs to be present before its content changes. Screen readers watch existing live region for updates. Adding a live region dynamically will not be announced.

Here are some other common pitfalls when it comes to live regions:

• Hiding the region with display: none or hidden removes it from the accessibility tree and causes the same problem as toggling the element entirely. If letting the region appear as an empty element breaks your layout, see example CSS for hiding content visually in my previous post.
• Replacing the entire live region will also break expected behavior. Remember to update its content only.
• Repeating the same message will typically not work, as the live region reacts to changed content and not re-population of the same. This can be bypassed by clearing the region and setting the new value after a short delay, or making sure the message varies, for example by including a timestamp.
• Moving focus can introduce double announcements. Status messages are defined as messages that will be read by assistive technology when they appear, but without moving focus.

So how do you verify that your live regions work? Test with screen readers. Automated tools or manual inspection can confirm the attributes are present, but only listening tells you whether the messages are announced, when, and in what order.