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.
Why this matters and how to fix it
Why this matters
Prerecorded audio-only content (like podcasts or announcements) and video-only content (like silent demos or animations) are not usable for everyone by default. People who are deaf or hard of hearing cannot access audio-only content, and people who are blind or have low vision cannot access video-only content. Providing an equivalent text alternative ensures that all users can access the same information, which is required by WCAG 2.2 and EN 301 549.
How to fix this issue
For audio-only content, provide a transcript that includes all spoken dialogue and important non-speech sounds (such as music cues or alerts). For video-only content, provide a text description that explains what is happening on screen or add an audio track that describes the visuals. Make sure the alternative is easy to find next to the media player.
Developer guidance
Identify any `<audio>` or `<video>` elements that are purely audio-only or video-only. For audio-only media, create a structured transcript (with speakers, timings, and key sounds) and link it near the player. For video-only media, create a written description of the visual sequence or add a narration track that explains key actions, text, and visual information. If the media is purely decorative and conveys no important information, consider removing it or marking it as decorative instead.
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 Examples
Before
<video src="product-demo-no-audio.mp4" autoplay muted loop></video>
<!-- Animation shows how to assemble the product, but there is no description -->After
<video src="product-demo-no-audio.mp4" autoplay muted loop></video>
<p class="sr-only">Video description: A step-by-step visual demonstration shows how to assemble the product. Step 1: ... Step 2: ...</p>
<!-- Screen reader users can access a full description of the visuals -->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. Identify any media that is audio-only (no synchronized video) or video-only (no meaningful audio).
- 2. For each audio-only media item, look for a clearly linked transcript near the player.
- 3. For each video-only media item, look for either a written description or a narration track that explains the visuals.
- 4. Confirm that the alternative includes all essential information (not just a summary).
- 5. Test with a screen reader to confirm that the transcript or description is discoverable and readable in a logical order.
Trusted by organizations across Europe working toward WCAG and EAA conformance