Goal: Ensure that prerecorded audio-only and video-only content has an alternative for users who cannot hear or see it.
- Audio-only: Provide a text transcript.
- Video-only: Provide a descriptive text or alternative content explaining what is visible.
This helps users with hearing impairments access audio content and users with visual impairments access video content.
Examples of Issues & Fixes
Prerecorded Audio (Podcast)
Fail
<div class="flex flex-col items-center justify-center gap-4 p-8">
<audio controls src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/into.mp3" type="audio/mpeg">
</audio>
</div>
Pass
<div class="flex flex-col items-center justify-center gap-4 p-8">
<audio controls src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/into.mp3" type="audio/mpeg">
</audio>
<a class="underline" href="https://webcontentaccessibility.com/wp-content/uploads/2025/10/intro-transcript.txt">Read the transcript</a>
</div>
Prerecorded Video without Visual Description
Fail
<div class="flex flex-col items-center justify-center gap-4 p-8">
<video src="https://assets.webcontentaccessibility.com/2025/10/envato_video_gen_Oct_06_2025_9_21_38.mp4" class="w-full h-auto" controls>
</video>
</div>
Pass
<div class="flex flex-col items-center justify-start gap-4 p-8">
<video src="https://assets.webcontentaccessibility.com/2025/10/envato_video_gen_Oct_06_2025_9_21_38.mp4" class="w-full h-auto" controls>
</video>
<p class="bg-frost-100 p-4 m-0 text-sm">
This animation shows a red ball bouncing across a green field from left to right, illustrating motion physics principles.
</p>
</div>
This animation shows a red ball bouncing across a green field from left to right, illustrating motion physics principles.
Quick Checklist
- ✅ Provide transcripts for audio-only content.
- ✅ Provide text descriptions for video-only content.
- ✅ Ensure alternatives convey the same information.
By implementing these alternatives, prerecorded audio or video content becomes accessible, satisfying WCAG 1.2.1.