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 route map has a long description, but it describes the wrong thing: the image's aria-describedby points to a paragraph about the company, so none of what the map shows (the streets, the turns, the travel time) reaches someone who can't see it.

Watch on YouTube (captions available)

Example

<img src="route-map.png" alt="Route map" aria-describedby="route-detail">
<p id="route-detail">Our drivers are vetted, insured and rated by riders like you.</p>

Why it matters

A rider who can't see the map can't check that the route matches the trip they booked. The description gives them a company blurb instead of the streets, turns and travel time a sighted rider reads straight off the map.

How to test

Find each image that needs more than a short alt, such as a map, chart or diagram, and follow its long description: the element its aria-describedby id points to, or a link right next to the image. Check that the id really exists. Then hide the image and read only the alt plus the description: could you still get everything the image shows (G92)? If not, it fails (F67). Here you couldn't: the alt says "Route map" and the description talks about the drivers, with no streets, turns or travel time. A description that is only partial, such as "3 turns" without naming them, fails too.

How to fix

Rewrite the long description so that, together with the short alt, it gives the same information as the map (technique G92): the start and end points, each turn and the travel time. The alt only identifies the image ("Route map"); the description carries the detail. Here the description is tied to the image with aria-describedby (technique ARIA15) and stays visible on the page, so riders with low vision or who find maps hard to read can use it too. A link right next to the map that goes to the description also works (technique G73). Don't use the longdesc attribute: it's obsolete in HTML and was never widely supported. If an image has no alt attribute at all, that's a different problem (scenario 6).

<img src="route-map.png" alt="Route map" aria-describedby="route-detail">
<p id="route-detail">
  Route from 14 Main St to 220 Oak Ave: left onto 2nd St,
  right onto Elm Rd, then left onto Oak Ave.
  About 12 minutes, no highways.
</p>

Outcome

A rider confirms the route, its three turns and the 12-minute travel time before the car arrives: the same details a sighted rider reads off the map.

Who is affected

Blind riders using screen readers, and low-vision riders who can't make out the map's detail, depend on the description matching the map to confirm a trip before the driver arrives.