aria-live — Live Regions for Dynamic Content Announcements

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-live defines regions of the page where dynamic content changes should be announced by screen readers automatically, with modes polite, assertive, and off controlling announcement timing.

In this tutorial, you'll learn how to use aria-live to announce dynamic content changes in your ARIA implementations.

What You'll Learn

By the end of this lesson, you'll understand the three aria-live values, the difference between polite and assertive announcements, when to use live regions, and how to avoid over-announcing.

Why It Matters

Dynamic content that changes without user interaction is invisible to screen readers unless you use live regions. Users will not know results loaded, errors appeared, or timers updated.

Real-World Use

Durga Antivirus Pro uses aria-live="polite" on the scan results region so users hear "Scan complete: no threats found" without interrupting their current task.

Live Region Decision

flowchart TD
  A[Content changes dynamically] --> B{Is the change important?}
  B -->|User must know immediately| C[Use aria-live='assertive']
  B -->|User should know when ready| D[Use aria-live='polite']
  B -->|User does not need to know| E[Do not use live region]
  C --> F[Use with role='alert']
  D --> G[Use with role='status']

How aria-live Works

When the content inside a live region changes, screen readers automatically announce the change. The value determines the urgency:

<!-- Polite: announces when user is idle -->
<div aria-live="polite" id="status-messages">
  Scan complete.
</div>

<!-- Assertive: announces immediately, interrupting current speech -->
<div aria-live="assertive" id="error-notifications">
  Connection lost.
</div>

Polite vs Assertive

aria-live="polite" waits until the user finishes their current action before announcing. Use for status updates, search results, loading progress.

aria-live="assertive" interrupts the current announcement. Use sparingly for critical errors, security warnings, or timeout alerts.

function showScanResult(result) {
  const region = document.getElementById('scan-status');
  region.setAttribute('aria-live', 'polite');
  region.textContent = result;
}

Live Region Roles

Several roles implicitly create live regions:

<!-- Equivalent to aria-live="assertive" -->
<div role="alert">Error: Scan failed.</div>

<!-- Equivalent to aria-live="polite" -->
<div role="status">3 threats found.</div>

Common Mistakes

• Keeping aria-live on elements that do not change: Live regions should only be active on dynamic content.
• Using aria-live="assertive" for routine updates: Overuse annoys users. Reserve assertive for critical messages.
• Replacing content vs appending: Screen readers announce the full changed content, not just the difference.
• Setting aria-live on the entire page: This would announce every minor change.
• Forgetting to add aria-live to dynamically loaded content: The live region must exist before content is added.

Practice and Challenge

1. What does aria-live="polite" do? Waits until the user is idle before announcing changes.

2. When should you use aria-live="assertive"? For critical, time-sensitive messages that require immediate attention.

3. What role creates an assertive live region? role="alert".

4. How does a screen reader handle content changes in a live region? It announces the entire current content of the region, not just the changed part.

5. Challenge: Create a live region that displays a counter. The counter updates every second. Use aria-live="polite" and verify the announcements.

FAQ

Mini Project

Build a status panel that displays scan progress. Use aria-live="polite" on the status text and update it as the scan progresses through 25, 50, 75, and 100 percent.

What's Next

Continue to aria-atomic to learn how to control live region update scope.