• 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 

<div class="error-toast">This item is currently out of stock</div>
<!-- appears when the user taps "Add to order" on a sold-out item; no role="alert",
     and keyboard focus stays on the Add button -->

Why it matters

A customer trying to order an out-of-stock item gets no spoken warning and may keep tapping "Add to order" expecting it to work.

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

role="alert" interrupts and announces immediately, so reserve it for genuine errors rather than routine status updates.

<div class="error-toast" role="alert">This item is currently out of stock</div>

Outcome

A customer hears the out-of-stock warning right away and picks a different dish.

Who is affected

Screen reader users ordering food never learn why an item won't add to their cart.

Learn more

Related scenarios