ARIA Live Regions
Test live region announcements
WCAG 4.1.3 - Status Messages (Level AA)
Status messages must be programmatically determined so they can be presented to the user by assistive technologies without receiving focus.
Mode:
Interactive Demo
Dynamic content updates
Toast Notifications:
Form Status:
Shopping Cart:
🛒 0 items
Screen Reader Behavior
What gets announced
Notifications
✕ (Silence)
Visual-only update, screen reader misses it
Form Status
✕ (Silence)
User doesn't know if save succeeded
Cart Updates
✕ (Silence)
User unsure if item was added
Live Region Types
When to use each
aria-live="polite"
Waits for user to finish current task before announcing. Use for non-critical updates.
Toasts, form validation, search resultsaria-live="assertive"
Interrupts immediately. Use sparingly for time-sensitive information.
Errors, alerts, timer warningsrole="status"
Implicit aria-live="polite". Semantic way to mark status messages.
Loading states, progress, confirmationsAutomation Tips
Testing hints
Playwright + axe-core
import AxeBuilder from '@axe-core/playwright';
// Check for status message accessibility
const results = await new AxeBuilder({ page })
.withRules(['aria-live-region-text'])
.analyze();
// Verify live region exists
const liveRegion = page.locator('[aria-live]');
await expect(liveRegion).toBeAttached();
// Trigger update and verify content changes
await page.click('[data-testid="trigger-notification"]');
await expect(liveRegion).toContainText('saved');Manual Testing
// Find all live regions
const liveRegions = await page.$$('[aria-live], [role="status"], [role="alert"]');
for (const region of liveRegions) {
const live = await region.getAttribute('aria-live');
const role = await region.getAttribute('role');
const atomic = await region.getAttribute('aria-atomic');
console.log({
live,
role,
atomic,
text: await region.textContent()
});
}
// Verify dynamic content is in live region
await page.click('[data-testid="save-button"]');
const status = page.locator('[role="status"]');
await expect(status).toHaveText(/saved|error/i);Testing Tips
Automation hints
- ✓ Verify live regions with
page.locator('[aria-live]') - ✓ Test polite vs assertive announcements: trigger action and check content update
- ✓ Check role="status" elements with
page.getByRole('status') - ✓ Verify aria-atomic="true" for complete region announcements
- ✓ Test dynamic content updates appear in live regions, not outside them
