Perceivable · 1.2 Time-based Media
Live audio-only content, such as a radio stream or live talk, must have a text alternative giving equivalent information, such as real-time captioning or, when the audio follows a script, the published script.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press play; the update arrives as if live. In Passes each line appears as text a moment after it is said; in Fails you can only hear it.
City Radio, on air now.
City Radio, on air now.
The tools follow the version you last used.
What happened
Why it passes
Each line appears as text a moment after it is said, so a deaf listener learns about the bus diversion and the late trains while it still matters.
Why it fails
The stream is sound only. A deaf listener gets nothing until a transcript is posted, when the travel news is already out of date.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<h3>Live: morning travel update</h3><audio controls src="/live/travel-update"></audio><p>A transcript of each update is posted the next day.</p>During the broadcast there is no text at all. By the time the transcript appears, the travel news is out of date.
Passes
Live preview
<h3>Live: morning travel update</h3><audio controls src="/live/travel-update"></audio><section aria-labelledby="live-text-title"> <h4 id="live-text-title">Live text of this broadcast</h4> <div id="live-text"> <p>Kofi: Good morning. It's eight o'clock, and this is your travel update.</p> <p>Kofi: The number 12 bus is diverted away from Market Street until noon.</p> </div></section>The words appear next to the player while the broadcast is on, so deaf listeners get the news at the same time as everyone else.
Passes
Live preview
const feed = new WebSocket("wss://captions.example.com/travel-update");const box = document.querySelector("#live-text");feed.addEventListener("message", (event) => { const { speaker, text } = JSON.parse(event.data); const line = document.createElement("p"); line.textContent = `${speaker}: ${text}`; box.append(line);});Each line typed by a live captioner is added to the page within seconds of being said, with the speaker's name.
Passes
Live preview
<h3>Live: station announcements</h3><audio controls src="/live/station-announcements"></audio><p><a href="/announcements/today/">Read today's announcement script</a></p>When live audio follows a prepared script word for word, publishing that script gives the same information in text.
Why it matters
People who are deaf or hard of hearing can follow live radio, talks and announcements as they happen.
W3C: Understanding 1.2.9Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures