- Success Criterion 1.1.1
- Conformance level A
- W3C reference F67
Long Image Description That Skips the Image’s Actual Content
1.1.1 — Non-text Content
Scenario
Setting
A ride-hailing app's trip booking screen
What’s wrong
The long description provided for an image doesn't actually convey the same information as the image itself.
Example
<img src="route-map.png" alt="Route map" longdesc="app-about.html">
<!-- app-about.html describes the company, not the actual route --> Why it matters
A rider confirming their pickup route can't tell whether the map shown matches the trip they booked, since the linked description talks about something else entirely.
How to test
Open the linked long description (or expandable detail) and compare it point-by-point to the image: if it leaves out information the image conveys, it fails.
How to fix
Point the description at content that actually explains the image, restating its real detail. A long description only helps if it actually describes the image it's attached to.
<img src="route-map.png" alt="Route map" aria-describedby="route-detail">
<p id="route-detail" class="visually-hidden">Route from Main St to Oak Ave, 12 minutes, 3 turns, no highways.</p> Outcome
A rider confirms the exact route and turn count before the car arrives, matching what a sighted rider sees on the map.
Who is affected
Blind and low-vision riders confirming trip details before a driver arrives depend on that description matching the map.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Not Hidden From Screen Reader Users
- Decorative Image Given Alt Text Instead of Being Marked Silent