It’s Alive! Facing The Monsters Of Accessible Live Regions
summary
Live regions are the practical bridge between visual toasts and screen readers: demos on a Grimm and Grace e‑commerce page use VoiceOver on Mac and CodePen to show failures, success toasts, live search, and cart totals. Use role="alert" for time‑sensitive errors and role="status"/aria-live="polite" for nonurgent updates; avoid marking bulk search results as live and instead move focus to a tabindex="-1" results region on submit. Use the HTML output element for live order totals; aria-atomic/busy/relevant are useful but inconsistent.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 3:07Romero’s quest for brains
- 13:18Creating live regions
- 20:16Live region customization
- 27:15Avoiding overuse of live regions
- 35:56When to communicate updates
- 37:20Using the output element
- 42:16Summary and key points
- 43:38Q&A session
related talks
47mThe Shopping Dead: An Accessible Live Web For The Unalive
29mJavaScript for Everybody
40mWebsite Accessibility Examples That Hinder Accessibility
47mBuilding Accessible Web Components
33mAccessibility Done Right
31mBringing the Web Back to the Blind
37mLost in Silence: Understanding When Screen Readers Don’t Speak Up
31mAccessible JavaScript applications