Provide Alternatives for Audio-Only and Video-Only Content
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it’s only sound or only visuals, always provide a text alternative that contains the same information.
Overview
Why this matters
Audio-only and video-only media each block a different user group unless you provide an equivalent alternative. Without that equivalent, users miss core content and cannot complete the same learning or task outcomes.
How to fix this issue
Audio-only: provide a complete transcript (speech + meaningful sounds). Video-only: provide a full text alternative that describes key visual events, or provide an equivalent narrated version. Place links to alternatives directly next to the media player.
Developer Guidance
Treat alternatives as required release artifacts. In upload/publish workflows, require transcript for audio-only and equivalent text alternative for video-only before publishing. Version alternatives with media so edits do not drift.
Code Examples
Incorrect Implementation
<audio src="podcast-episode-12.mp3" controls></audio>
<!-- No transcript or text alternative provided -->Correct Implementation
<audio src="podcast-episode-12.mp3" controls></audio>
<a href="podcast-episode-12-transcript.html">Read the full transcript of this episode</a>Real-World Implementation
Before
<audio controls src="incident-update.mp3"></audio>
<!-- Release-critical outage steps are spoken, but no transcript exists -->After
<audio controls src="incident-update.mp3"></audio>
<a class="transcript-link" href="incident-update-transcript.html">Read transcript</a>
<!-- Team members can access the same instructions without audio -->CSS Example (Guidance)
/* Optional: visually emphasize links to transcripts and descriptions */
.transcript-link {
font-weight: 500;
color: #1e40b0;
text-decoration: underline;
}
.transcript-link:hover {
color: #1d4ed8;
}
Manual Testing
- 1. Inventory prerecorded audio-only and video-only media in the flow.
- 2. Confirm audio-only assets provide complete transcripts adjacent to the media.
- 3. Confirm video-only assets provide equivalent text alternative describing key visuals/events.
- 4. Compare alternatives with media to ensure information equivalence.
- 5. Verify discoverability and access via keyboard and screen reader.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance