1.2.1 Audio-only and Video-only
Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual
What This Means
Pre-recorded audio-only content (like podcasts or voice recordings) must have a text transcript. Pre-recorded video-only content (like silent animations or surveillance footage) must have either a text description or an audio track that describes the visual information.
Without these alternatives, deaf users cannot access audio content, and blind users cannot access video content. This criterion ensures time-based media has an equivalent alternative for people who cannot perceive the original format.
Who This Affects
- Deaf and hard-of-hearing users — they cannot hear audio-only content and need a transcript
- Blind and low-vision users — they cannot see video-only content and need a text or audio description
- Deafblind users — they need a text transcript that can be rendered in braille
- Users in noisy or quiet environments — transcripts let them consume content without audio
Common Pitfalls
1. Podcast with no transcript
<!-- Bad: audio-only content with no text alternative -->
<audio controls src="interview-episode-42.mp3"></audio>
<p>Listen to our latest interview!</p>
2. Silent instructional video with no description
<!-- Bad: video-only content with no text alternative -->
<video controls src="assembly-instructions.mp4"></video>
3. Providing a summary instead of a full transcript
<!-- Bad: a brief summary is not a transcript -->
<audio controls src="earnings-call.mp3"></audio>
<p>Summary: Q3 earnings were discussed.</p>
4. Voice message or audio note with no alternative
<!-- Bad: embedded audio clip with no transcript -->
<audio controls src="voicemail-from-doctor.mp3"></audio>
How to Fix
Audio-only: provide a transcript
<!-- Good: full transcript provided alongside audio -->
<audio controls src="interview-episode-42.mp3"></audio>
<details>
<summary>Read full transcript</summary>
<p><strong>Host:</strong> Welcome to the show. Today we're talking about...</p>
<p><strong>Guest:</strong> Thanks for having me. The key insight is...</p>
</details>
Video-only: provide a text description
<!-- Good: text alternative describes all visual information -->
<video controls src="assembly-instructions.mp4"></video>
<details>
<summary>Text description of video</summary>
<p>Step 1: Remove the four screws from the back panel using a Phillips screwdriver.</p>
<p>Step 2: Slide the panel to the left and lift it off the frame.</p>
<p>Step 3: Connect the ribbon cable to port B on the motherboard.</p>
</details>
Video-only: provide an audio description track
<!-- Good: audio track describes the visual content -->
<video controls src="assembly-instructions.mp4">
<track kind="descriptions" src="assembly-described.vtt" srclang="en" label="Audio descriptions">
</video>
How to Test
- Identify all audio-only content (podcasts, voice recordings) and video-only content (silent animations, screencasts without narration) on the page.
- For each audio-only element, look for a text transcript nearby (inline, in a
<details>element, or linked). - For each video-only element, look for a text description or an audio description track that explains the visual content.
- Read the transcript or description and compare it against the original media to verify it conveys equivalent information.
- Pass: Every audio-only element has a complete text transcript, and every video-only element has a text description or audio track describing visual content.
- Fail: Any audio-only or video-only content lacks a text alternative, or the alternative is a summary rather than a complete equivalent.
axe-core Rules
No automated axe-core rules. This criterion requires manual testing.