• Success Criterion 4.1.3
  • Conformance level AA

Cart Confirmation Toast With No Live Region Announcement

4.1.3 — Status Messages

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

"Item added to cart" toast rendered with no role="status" (code that makes updates announced)/aria-live (code that makes screen readers announce updates) — screen reader users never informed.

Example 

<div class="toast">Recording started</div>
<!-- the toast fades in after the host clicks Record, with no role="status" or aria-live,
     and no aria-atomic -->

Why it matters

A host who starts recording gets no spoken confirmation and may proceed without knowing whether it actually began.

How to test

Add an item to the cart with a screen reader running, without looking at the screen: if the 'Added to cart' toast isn't announced, it fails.

How to fix

Mount the live region in the page before the toast text is injected, so assistive tech is already watching for changes.

<div class="toast" role="status" aria-live="polite" aria-atomic="true">Recording started</div>

Outcome

A host hears "Recording started" and continues the meeting confident it's being captured.

Who is affected

Screen reader users hosting meetings cannot confirm a toast like "Recording started" without checking visually.

Learn more

Related scenarios