WebsightWho it affects
Someone who is deaf listening to the local newspaper's weekly podcast sees a play button and a progress bar. The 20 minutes of interview are simply not available to them.
Someone hard of hearing on a noisy bus can follow the podcast from a transcript at their own pace and search it for the part they want.
Someone who reads faster than they listen gets the facts from a transcript in two minutes instead of twenty.
Broken versus fixed
The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.
<h2>Interview with the new editor</h2>
<audio src="interview.mp3" controls></audio>A player with no words. A screen reader announces the controls; a deaf listener has nothing to read.
<h2>Interview with the new editor</h2>
<audio src="interview.mp3" controls>
<track kind="captions" src="interview.en.vtt" srclang="en" label="English">
</audio>
<p><a href="interview-transcript.html">Read the transcript</a></p>The captions track satisfies the check. The transcript link is what most people will actually use.
Test it by hand in two minutes
- Play the audio with the sound off. Is there any way to find out what was said?
- Right click the player, choose Inspect, and look for a track element inside the audio element with kind="captions".
- Follow the transcript link if there is one and check it covers the whole recording, including who is speaking.
- If the audio is music with no speech, a short description of what it is will do; say so on the page.
The fix
<audio src="interview.mp3" controls></audio><audio src="interview.mp3" controls>
<track kind="captions" src="interview.en.vtt" srclang="en" label="English">
</audio>
<p><a href="interview-transcript.html">Read the transcript</a></p>WebVTT files are plain text with timestamps. If you already have a transcript, put it on the page as text; it works in every browser and in search.
Transcript on the same page
<audio src="show.mp3" controls></audio><audio src="show.mp3" controls></audio>
<details>
<summary>Transcript</summary>
<p>Presenter: Welcome to the show. This week we are at the food bank on Mill Street.</p>
</details>A disclosure keeps the page tidy. Name the speakers and include sounds that matter, such as applause or a phone ringing.
Common mistakes
- Linking to an automatic transcript without checking it; names and numbers are often wrong.
- Publishing the transcript as a scanned PDF, which is itself an image.
- Adding an empty track element to make the check pass.
- Writing out full lyrics for a music clip when a line saying what it is would do.
WCAG criteria this rule maps to
axe-core tags this rule as WCAG 2.2 level A. It is a check (not run by Websight) for:
The check looks for a track element with kind="captions" inside the audio element. It cannot see a transcript on the page, cannot tell if the track file exists or matches the audio, and is turned off by default in axe-core as deprecated. Treat a pass as a prompt to look, not a tick. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.
Related rules
video-caption
A video element with speech or meaningful sound needs captions: text that appears on screen in time with the audio.
A
Sound must not start playing on its own
no-autoplay-audio
If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page.
A
Pages must not refresh or redirect on a timer
meta-refresh
A meta refresh with a delay reloads the page, or sends the visitor somewhere else, after a set number of seconds.
A
Embedded objects must have alternative text
object-alt
The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page.