aria-live

`aria-live` is a WAI-ARIA attribute that marks a region of a web page as a live region. When content within a live region changes, assistive technologies automatically announce the update to the user, even if the user's focus is elsewhere on the page. This allows screen reader users to be informed of dynamic content changes without having to navigate to the updated area. Web pages are increasingly dynamic. Chat messages arrive, form validation errors appear, stock prices update, shopping carts change, and status notifications pop up. Sighted users perceive these changes visually, but screen reader users have no way of knowing that content has changed somewhere on the page unless the change is explicitly announced. `aria-live` solves this problem. The attribute accepts three values: `off` (the default, no announcements), `polite` (announce when the user is idle), and `assertive` (interrupt and announce immediately). Choosing the right value is critical to creating a usable experience.

WCAG Success Criterion 4.1.3 (Status Messages) specifically requires that status messages be programmatically determinable through role or properties so they can be presented to the user by assistive technologies without receiving focus. This criterion was introduced to address the common failure of dynamic updates being invisible to screen reader users. Without live regions, screen reader users face a silent web. A form submission that displays a success message at the top of the page goes unnoticed. A search that updates results dynamically provides no feedback. An error that appears next to a form field after validation is invisible unless the user happens to navigate there. The impact goes beyond convenience. Missing announcements can prevent users from completing tasks entirely. If a user doesn't know their form submission failed, they may leave the page believing it succeeded. If they don't know search results have loaded, they may think the search found nothing.

The fundamental pattern for `aria-live` involves two steps: first, place an empty live region in the DOM; then inject content into it when updates occur. ```html <!-- Step 1: Empty live region in the initial HTML --> <div aria-live="polite" id="status-message"></div> <!-- Step 2: JavaScript injects content --> <script> document.getElementById('status-message').textContent = '3 results found'; </script> ``` The live region must exist in the DOM before content is added to it. If you dynamically create both the live region and its content simultaneously, screen readers may not detect the change. This is the most common implementation mistake. **aria-live="polite"** is the appropriate choice for most updates. It queues the announcement and waits for the screen reader to finish its current speech before delivering the update. Use it for search results, status messages, form submission confirmations, and non-critical notifications. **aria-live="assertive"** interrupts the screen reader immediately. Reserve it for urgent messages that require immediate attention: error alerts, session timeout warnings, or critical system messages. Overusing assertive announcements creates a jarring experience and trains users to ignore them. **Supporting attributes** fine-tune live region behavior: - `aria-atomic="true"` tells the screen reader to announce the entire region content, not just the changed portion. Use this when the whole message needs context. - `aria-relevant` specifies which types of changes trigger announcements: `additions`, `removals`, `text`, or `all`. The default is `additions text`. **Implicit live regions** come from certain ARIA roles: - `role="alert"` creates an assertive live region with `aria-atomic="true"`. - `role="status"` creates a polite live region. - `role="log"` creates a polite live region where new entries are announced. - `role="timer"` creates an off live region by default (to avoid constant announcements). ```html <!-- Using role="status" as a polite live region --> <div role="status">Cart updated: 3 items</div> <!-- Using role="alert" for urgent messages --> <div role="alert">Your session will expire in 2 minutes.</div> ``` **Best practices for live regions:** - Keep announcements concise. Long text blocks become tedious when read aloud. - Avoid frequent rapid updates. If content changes every second, screen readers cannot keep up. - Don't announce the obvious. Moving focus to an element already announces it; a redundant live region announcement creates double speech. - Test with real screen readers. Browser developer tools cannot fully simulate live region behavior.