• Success Criterion 1.1.1
  • Conformance level A
  • W3C reference F20

Outdated Alt Text That No Longer Matches the Image

1.1.1 — Non-text Content

Scenario

Setting

An email client's compose window

What’s wrong

Content changes on screen but its alt text / accessible name is never updated, so screen readers announce old, wrong information.

Example 

<button aria-label="Attach file">
  <img src="paperclip-empty.svg" alt="No attachments">
</button>
<!-- after the user attaches 3 files, only the icon swaps visually -->
<button aria-label="Attach file">
  <img src="paperclip-full.svg" alt="No attachments">
</button>

Why it matters

A screen reader user attaching files before sending an email needs confirmation it worked. Stale text saying "no attachments" makes them think the send will fail.

How to test

Compare the alt text to what the image currently shows: outdated alt describing a different image, or copy left over from a previous version, is a fail.

How to fix

Drive the accessible name from the current state whenever it changes, not a value set once at page load. Update the label in the same script that swaps the icon, so the two never fall out of sync.

<button aria-label="3 files attached">
  <img src="paperclip-full.svg" alt="" aria-hidden="true">
</button>

Outcome

A user attaches three files and immediately hears "3 files attached," so they send the email without re-checking.

Who is affected

Screen reader users, and anyone relying on accessible names to track dynamic UI state, are told something that's no longer true.

Learn more

Related scenarios