Live Region Roles — Alert, Log, Marquee, Status and Timer

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

ARIA live region roles like alert, log, marquee, status, and timer create regions where content changes are automatically announced by screen readers without requiring user focus.

In this tutorial, you'll learn how to use live region roles in ARIA implementations.

What You'll Learn

By the end of this lesson, you'll understand the five live region roles, their default politeness settings, when to use each role, and how they compare to aria-live directly.

Why It Matters

Live region roles provide semantic meaning plus automatic live region behavior. Using the correct role gives screen readers better context for announcing dynamic content.

Real-World Use

Durga Antivirus Pro uses role="alert" for scan error messages and role="status" for scan completion messages.

Live Region Roles

flowchart TD
  A[Live Region Roles] --> B[alert]
  A --> C[log]
  A --> D[marquee]
  A --> E[status]
  A --> F[timer]
  B --> G[Assertive, critical message]
  C --> H[Polite, new entries appended]
  D --> I[Non-essential scrolling text]
  E --> J[Polite, supplemental info]
  F --> K[Polite, time-sensitive countdown]

Alert Role

role="alert" creates an assertive live region for important messages:

<div role="alert" id="error-message">
  Scan failed: disk full.
</div>

The screen reader immediately interrupts current speech to announce this. Use sparingly.

Log Role

role="log" creates a polite live region where new content is appended:

<div role="log" aria-live="polite" aria-relevant="additions" id="scan-log">
  <p>Scanning file 1 of 100...</p>
  <p>Scanning file 2 of 100...</p>
</div>

New entries are appended and announced in order as the user is idle.

Status Role

role="status" creates a polite live region for supplemental information:

<div role="status" id="scan-status">
  <p>3 threats detected. Scan complete.</p>
</div>

This is announced when the user is idle, like aria-live="polite".

Timer Role

role="timer" announces time-related content changes:

<div role="timer" aria-live="off" id="countdown">
  5:00 remaining
</div>

function updateTimer(display) {
  display.textContent = formatTime(remaining);
}

Marquee Role

role="marquee" is for non-essential scrolling or moving text. Screen readers may not announce it since it is non-essential.

Common Mistakes

• Using role="alert" for non-critical messages: Overuse trains users to ignore alerts.
• Using role="log" when content should be replaced: Log is for appended content only.
• Not providing an accessible name for status regions: Label the region so users can identify it.
• Using role="timer" without updating content: The timer role only works when its content changes.
• Expecting all screen readers to handle marquee the same: Marquee support varies widely.

Practice and Challenge

1. What live region role is best for error messages? role="alert".

2. What is the default politeness of role="status"? Polite.

3. What live region role is best for a chat window? role="log".

4. What is the difference between role="alert" and role="status"? Alert is assertive (interrupts). Status is polite (waits for idle).

5. Challenge: Build a countdown timer using role="timer" that updates every second and announces the remaining time.

FAQ

Mini Project

Create a scan progress dashboard with three live regions: role="alert" for errors, role="log" for scan activity, and role="status" for completion state.

What's Next

Continue to aria-owns to learn about redefining parent-child relationships.