• Success Criterion 1.1.1
  • Conformance level A

Lazy-Loaded Image Whose Alt Text Never Finishes Loading

1.1.1 — Non-text Content

Scenario

Setting

A streaming music app's search results

What’s wrong

Placeholder/lazy-load images whose final alt never populates (JS injects alt late or never).

Example 

<img src="placeholder.gif" data-src="album-cover.jpg" class="lazy">
<!-- a lazy-load script swaps src on scroll into view, but alt is never set -->

Why it matters

A listener scrolling through search results by screen reader hears "loading" for every album cover forever, never learning which album is which.

How to test

Reload the page and immediately check the alt attribute with a screen reader before/after lazy-load completes: if alt is blank until the image fully loads (or never populates), it fails.

How to fix

Swap the real alt text in at the same moment the real image loads.

<img src="placeholder.gif" data-src="album-cover.jpg" data-alt="Album cover: Midnight Drive by The Coastals" class="lazy" alt="Loading album cover">
<script>
img.src = img.dataset.src;
img.alt = img.dataset.alt;
</script>

Outcome

A listener hears each album's real name as it loads in, and picks the right one without waiting or refreshing.

Who is affected

Screen reader users browsing image-heavy, lazy-loaded feeds are stuck on a placeholder that never resolves.

Learn more

Related scenarios