Live Regions aria-live aria-atomic aria-relevant
Announce asynchronous updates to assistive technology.
What Are Live Regions?
A live region is a section of the page whose content updates dynamically. Screen readers monitor live regions and announce changes automatically without the user moving focus.
Creating a Live Region
Add aria-live to a container element:
<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>
<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>All lessons in this course
- aria-expanded aria-controls for Toggles
- aria-selected and Tab Patterns
- Live Regions aria-live aria-atomic aria-relevant
- Testing with Screen Readers