• Success Criterion 4.1.3
  • Conformance level AA

Status Message Conveyed Only Visually, Never Programmatically

4.1.3 — Status Messages

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

Overusing assertive/role="alert" (code that announces urgent messages) for non-status content is the inverse problem — the 4.1.3 fail is when *status* text appears only visually.

Example 

<label><input type="checkbox" onchange="addInsurance(this.checked)"> Add collision insurance ($12/day)</label>
<p id="insuranceStatus">Collision insurance added to your total</p>
<!-- the paragraph's text is inserted only when the checkbox is checked, with no role or aria-live -->

Why it matters

A renter checking the collision insurance box hears no confirmation it was added, and may leave checkout unsure whether they're covered.

How to test

Trigger a status change with a screen reader running (eyes closed): if it's only visible on screen with nothing announced, it fails.

How to fix

This is routine confirmation text, not an error, so role="status" fits better than the more interruptive role="alert".

<p id="insuranceStatus" role="status" aria-live="polite">Collision insurance added to your total</p>

Outcome

A renter hears the insurance confirmation and finishes checkout with no second-guessing.

Who is affected

Screen reader users adding optional insurance at checkout cannot confirm the add-on applied to their total.

Learn more

Related scenarios