WCAG 2.2 - Success Criterion
1.2.1 Audio-only and Video-only (Prerecorded)
Description
For prerecorded audio-only content, a text transcript must be provided that presents the same information as the audio. For prerecorded video-only content (no audio track), either a text alternative or an audio track must be provided that presents equivalent information. This criterion ensures that people who are deaf, hard of hearing, or blind can access the content of standalone audio and video media.
How To Test
- Identify all audio-only and video-only media on the page.
- For audio-only content, check that a text transcript is available on the page or linked from the page.
- Verify the transcript includes all spoken words and relevant non-speech sounds (e.g., "[applause]", "[alarm sounds]").
- For video-only content, check whether a text description or audio description track is provided.
- Verify the text description covers all visual information including actions, on-screen text, and scene context.
- Confirm the alternative is clearly labeled and easy to find in proximity to the media player.
Testing Tools
- NVDA — Screen reader to verify captions are properly associated with media and alternate descriptions are announced.
- Lighthouse — Accessibility audit to check for missing captions, transcripts, and media accessibility issues.
- axe DevTools — Detailed scan of media-related accessibility violations and remediation suggestions.
Demo 1: Audio-only with Transcript
A podcast episode card with a play button but no text transcript. Users who are deaf or hard of hearing cannot access the content.
Episode 7: Focus management in SPAs
Duration: 24 min
The same card includes a transcript in a <details> element - the full audio content is available as text.
Episode 7: Focus management in SPAs
Duration: 24 min
Read transcript
[Intro music]
Host: Welcome to Accessible by Design. I'm your host, and today we're talking about focus management in single-page applications…
Guest: Thanks for having me. Focus management is one of the most common issues I see in React and Vue apps…
[Transcript continues…]
Code
Code
Demo 2: Video-only with Text Description
A silent product demonstration video with no description. Blind users cannot understand what happens in the video.
(No video file - demonstrates the markup without description.)
The video is followed by a text description providing equivalent information about the visual content.
(No video file - demonstrates the markup with description.)
Video Description:
The video shows a coffee mug being filled with hot water, followed by a tea bag being placed in the mug. The water turns amber as the tea steeps. After 3 minutes, the tea bag is removed and the finished cup is set on a saucer.
Code
Code
WCAG Techniques
- Failures: F67 (audio-only content without transcript), F68 (video-only content without audio or text alternative)
- Success Techniques: G158 (providing transcript of an audio track), G166 (providing audio description of a video), H96 (using markup to identify a web page as a video transcript)
Fail Explanation
A failure occurs when a podcast episode, audio clip, or silent video is published without an equivalent alternative. For example, a podcast page with no transcript means deaf and hard-of-hearing users have no access to the spoken content. A silent product demonstration video with no text description or narration track means blind users cannot understand what the video shows.
Pass Explanation
A passing implementation for audio-only content provides a full transcript - not just a summary - that includes all spoken dialogue and relevant non-speech sounds. For video-only content, the author either provides a text description of what occurs in the video (including actions, scene changes, and on-screen text) or adds an audio description track that narrates the visual content.
Notes
This criterion applies only to prerecorded content; live audio-only and live video-only are covered separately. If a video has both audio and video tracks, it falls under the captions and audio description criteria rather than this one.
Techniques
WCAG techniques used in this demo: G159, G166