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

Content Changes That Never Update Their Accessible Name

4.1.2 — Name, Role, Value

Scenario

Setting

A webinar platform's registration form

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 class="avatar-upload">
  <img src="upload-icon.svg" alt="Upload headshot">
</button>
<!-- after a successful upload, script swaps upload-icon.svg for check-icon.svg and shows "Uploaded" visually,
     but the alt text stays "Upload headshot" -->

Why it matters

A registrant using a screen reader hears "Upload headshot" even after uploading, and may try to upload the same file again, thinking it failed.

How to test

Inspect the control's accessible name/alt after the content changes: if the old value is still announced instead of the updated one, it fails.

How to fix

Update the accessible name in the same code path that swaps the icon, not just the src attribute.

<button class="avatar-upload" aria-label="Headshot uploaded">
  <img src="check-icon.svg" alt="" aria-hidden="true">
</button>

Outcome

A registrant hears confirmation that their photo uploaded and moves on to the next field.

Who is affected

Screen reader users confirming their photo uploaded cannot trust a label describing the button's old state.

Learn more

Related scenarios