Success Criterion 4.1.3
Conformance level AA

Error Toast With No Alert Role and No Focus Movement

4.1.3 — Status Messages

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Error toasts using no role="alert" (code that announces urgent messages) (and focus not moved as alternative design).

Example

A food delivery app's restaurant menu shows the problem clearly: error toasts using no role="alert" (code that announces urgent messages) (and focus not moved as alternative design).

Why it matters

Screen-reader users who need spoken confirmation of saves, errors, and results. Here, on a food delivery app's restaurant menu, the result is they are excluded from part of the experience.

How to test

Trigger a form error with a screen reader running: if the error toast has no role="alert" and focus isn't moved to it either, it fails.

How to fix

The status text must be wired as a live region (code that makes screen readers announce updates)/status role so screen readers announce it automatically without moving focus.

Outcome

After the fix, the same visitor to a food delivery app's restaurant menu can now move past the barrier without workarounds.

Who is affected

Screen-reader users who need spoken confirmation of saves, errors, and results.

Learn more

Understanding Understanding document (opens in a new tab)