Status Message

A status message is information that appears on a page without moving the user's focus: send confirmation, form error, cart update. Sighted users spot it visually, but screen readers detect it only if marked with role="status" or an ARIA live region. WCAG criterion 4.1.3 (level AA) makes this signaling mandatory.

You add an item to your cart. A banner appears: "Item added (3 items)". You saw it. A screen reader user heard nothing. The banner appeared in the DOM, but no mechanism signaled it to assistive technologies. For the screen reader, nothing happened.

#What WCAG Requires

WCAG criterion 4.1.3 (level AA) sets a simple rule: every status message must be transmitted to assistive technologies without receiving focus. The definition covers four cases: the result of an action ("Message sent"), a waiting state ("Loading…"), the progress of a process (progress bar), and the existence of errors ("2 invalid fields").

The technical solution: ARIA live regions. A container marked role="status" implicitly has aria-live="polite" and aria-atomic="true". The screen reader waits for the end of its current sentence, then announces the entire container's content.

<!-- The container must exist in the DOM BEFORE the message is injected -->
<div role="status"></div>
 
<!-- When the action occurs, JavaScript injects the text -->
<div role="status">Item added to cart (3 items)</div>

#The Three Mistakes Everyone Makes

Creating the container and message at the same time. If you inject a <div role="status">Sent</div> into the DOM all at once, some screen readers won't detect the live region. The empty container must be present when the page loads. Only the text changes afterward.

Using aria-live="assertive" for everything. Assertive mode immediately interrupts what the screen reader is saying. Reserve it for critical alerts (system errors, data loss). For a cart confirmation or form success, polite is enough. W3C ARIA technique 22 recommends role="status" (thus polite) for informational messages.

Confusing role="alert" and role="status". An alert implies aria-live="assertive": the screen reader cuts everything to announce the message. A status implies aria-live="polite": it waits its turn. Use alert for blocking errors, status for confirmations and secondary updates.

#In Summary

Place an empty <div role="status"> in your HTML on page load. Inject text into it when the event occurs. Keep role="alert" for emergencies, role="status" for everything else. RGAA repeats this requirement in criteria related to scripts and consultation.