• Success Criterion 4.1.3
  • Conformance level AA

Autosave ‘Saved’ Indicator With No Live Announcement

4.1.3 — Status Messages

Scenario

Setting

A subscription box service's account settings

What’s wrong

Form "Saved" / autosave indicators with no live announcement.

Example 

<input type="text" id="shippingAddress" onblur="autosave()">
<span id="autosaveMsg" class="fade-in-out"></span>
// JS: autosave() sets autosaveMsg.textContent = 'Saved', then clears it after 2000ms
<!-- "Saved" flashes for two seconds with pure CSS and JS timing and no aria-live -->

Why it matters

A subscriber editing their shipping address hears nothing confirming the change saved, and might navigate away too soon.

How to test

Trigger an autosave with a screen reader running: if the 'Saved' indicator updates silently with no announcement, it fails.

How to fix

Because the message disappears after two seconds, keep it on screen longer than a screen reader needs to start speaking it.

<span id="autosaveMsg" role="status" aria-live="polite" class="fade-in-out"></span>

Outcome

A subscriber hears "Saved" moments after editing their address and moves to the next field.

Who is affected

Screen reader users updating account settings cannot tell whether their address change was actually saved.

Learn more

Related scenarios