• 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

A script swaps the paperclip icon when files are attached, but never updates the image's alt text, so screen readers still announce the old state: no files attached.

Watch on YouTube (captions available)

Example 

<button type="button" id="attach-button">
  <img id="attach-icon" src="paperclip-empty.svg" alt="Attach files, no files attached">
</button>

<script>
  // Runs after the user picks files, e.g. showAttachments(3)
  function showAttachments(count) {
    const icon = document.getElementById('attach-icon');
    icon.src = 'paperclip-full.svg'; // the picture now shows files attached...
    // ...but icon.alt still says "Attach files, no files attached"
  }
</script>

Why it matters

A screen reader user attaching files before sending an email needs confirmation it worked. Alt text that still says "no files attached" makes them think the upload failed, so they attach the files again or hesitate to send.

How to test

Change the state that swaps the image (here, attach three files), then check the image's alt in DevTools, the button's name in the Accessibility pane, or listen with a screen reader. If the alt still describes the old picture, such as "no files attached", it fails (F20).

How to fix

Keep the image's own alt text in sync with the picture. In the same script that swaps the paperclip icon, set img.alt to describe the new state, for example "Attach files, 3 files attached". Don't add an aria-label to the button: it would override the alt and become a second label to keep in sync. With no aria-label, the image's alt text (technique H37) is the button's accessible name, so one update keeps both the image and the button accurate.

<button type="button" id="attach-button">
  <img id="attach-icon" src="paperclip-empty.svg" alt="Attach files, no files attached">
</button>

<script>
  function showAttachments(count) {
    const icon = document.getElementById('attach-icon');
    icon.src = count > 0 ? 'paperclip-full.svg' : 'paperclip-empty.svg';
    // Update the alt in the same step, so it always matches the picture
    icon.alt = count === 0
      ? 'Attach files, no files attached'
      : 'Attach files, ' + count + (count === 1 ? ' file' : ' files') + ' attached';
  }
</script>

Outcome

A user attaches three files, and when focus returns to the attach button their screen reader announces "Attach files, 3 files attached, button", so they know the files are there and send the email without re-checking.

Who is affected

Screen reader users are told something that's no longer true: after adding three files, the attach button still says no files are attached.

Learn more

Related scenarios