4.1 Compatible · SC 4.1.3

AA2 min read

Status Messages

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

In plain language

When something on the page changes — like "3 items added to cart" or "Your changes were saved" — that message must be announced automatically to screen reader users, without them needing to move their focus to find it.

Why it matters

A sighted user notices a confirmation banner or error message the moment it appears on screen. A screen reader user doesn't get that for free — if the message isn't marked up correctly, they can complete an action and have no idea whether it worked, failed, or changed anything at all.

In practice

Fails this criterion

A user submits a form and a green "Your changes were saved" message appears visually, but it's just a plain <div> with no ARIA attributes. A screen reader user submits the same form and hears nothing — they have no way to know it succeeded.

Meets this criterion

The same message is placed in a container with role="status" or aria-live="polite". The moment it appears, the screen reader automatically announces "Your changes were saved" — without the user having to search for it.

Test it yourself

Turn on a screen reader and trigger any action that produces a status message — submit a form, add an item to a cart, or apply a filter. Without moving your focus, the screen reader should announce the result automatically. If it stays silent, this criterion is failing.

Read SC 4.1.3 on the official WCAG 2.2 specification ↗