aria-live is an ARIA attribute used to tell screen readers that content may change dynamically and should be announced automatically without the user moving focus.
🔊 What aria-live Does
It defines how and when screen readers announce updates inside an element.
<div aria-live="polite"></div>
When the content of this <div> changes, the screen reader reads the new content automatically.
🎯 Why aria-live Is Needed
Screen readers do not detect DOM changes by default.aria-live is used for:
- Form validation messages
- Chat messages
- Notifications
- Error/success alerts
- Live data updates
🧠 aria-live Values
1️⃣ aria-live="off" (default)
- No announcements
- Screen reader ignores updates
2️⃣ aria-live="polite"
<div aria-live="polite">Saved successfully</div>
- Announces when user is idle
- Does not interrupt
- Best for non-critical updates
✔ Recommended in most cases
3️⃣ aria-live="assertive"
<div aria-live="assertive">Payment failed</div>
- Announces immediately
- Interrupts current speech
- Use sparingly
✔ Critical alerts only
🧪 Real Example (Form Error)
<p id="error" aria-live="assertive"></p>
document.getElementById("error").textContent = "Email is required";
➡ Screen reader announces:
“Email is required”
🔥 Related Attributes (Interview Tip)
role="alert"
<div role="alert">Invalid password</div>
- Implicitly uses
aria-live="assertive" - Shorter & recommended for errors
aria-atomic
<div aria-live="polite" aria-atomic="true">
Items added to cart: 3
</div>
- Reads entire content, not just changed part
❌ Common Mistakes
- ❌ Overusing
assertive - ❌ Putting
aria-liveon large containers - ❌ Using it for static content
🎯 Short Interview Answer
aria-liveis an ARIA attribute that tells screen readers to automatically announce dynamic content updates.
It is used for live messages like errors, notifications, and status updates, with values likepoliteandassertivecontrolling the urgency.
⭐ One-line summary
aria-live makes dynamic content audible to screen reader users without requiring focus.
