status, alert, and log Roles
Pick the right live role for each kind of update.
status, alert, and log Roles is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Roles Build In Politeness
Some ARIA roles turn an element into a live region for you, setting a sensible politeness level automatically so you write less markup.
role status Is Polite
The status role marks a region that updates politely. It is perfect for low-key confirmations like a saved or copied message. 📋
<div role="status">Copied to clipboard</div>status Means aria-live polite
Using role status is shorthand for aria-live set to polite. You get the same behavior with clearer, more semantic intent.
role alert Is Assertive
The alert role announces assertively the instant its content appears. Reach for it when something needs attention right now. ⚠️
<div role="alert">Payment failed</div>alert Means aria-live assertive
An alert behaves like aria-live assertive plus aria-atomic true. It interrupts and reads its whole text as one message.
role log Is for Streams
The log role suits content where new entries get added in order, like a chat thread or an activity feed. It reads politely.
<ul role="log" aria-live="polite"></ul>log Preserves Order
A log signals that older messages matter and sequence is meaningful, so assistive tech reads additions in the order they arrive.
Status vs Alert in Practice
Pick status for a gentle confirmation and alert for a problem. A saved badge is status; a form-blocking error is alert.
Alerts Should Be Earned
Overusing the alert role makes everything interrupt and feel noisy. Reserve it for genuine errors and time-sensitive warnings.
Place the Role Before Content
Like raw live regions, an element with role status should exist before you inject text, so the screen reader is already watching it.
<p role="status" id="out"></p>Roles Add Meaning Too
Beyond politeness, these roles describe what the region is. That semantic clarity helps both screen readers and the next developer.
Quick Check
You need to announce a form submission error that blocks the user immediately. Which role fits?
Recap: Live Roles
You now know status is polite, alert is assertive, and log keeps ordered streams. Choose the role that matches the update's weight. ✅
Frequently asked questions
Is the “status, alert, and log Roles” lesson free?
Yes — the full text of “status, alert, and log Roles” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “status, alert, and log Roles”?
Pick the right live role for each kind of update. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “status, alert, and log Roles” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.