Accessibility

`a11y/media-alternative`

Recorded audio has a transcript; recorded video has audio description of what is only shown, or a full text alternative.

seriousmanualWCAG 1.2.1, 1.2.3, 1.2.5 · AAfe-a11y-media

Why

A podcast without a transcript is closed to deaf people; a product demo where the steps are only shown on screen is closed to blind people. Captions alone do not describe what is seen.

Fix

Link a transcript right next to every audio player. For video, describe important visual information in the narration itself (the cheapest way), add an audio-described version, or at AA at least provide described audio; a full text transcript with the visual details is the A-level minimum. Keep the transcript as HTML, not a PDF.

Examples

<!-- good -->
<audio controls src="episode-12.mp3"></audio>
<p><a href="/podcast/12/transcript">Read the transcript of episode 12</a></p>

Sources

Facts

Id: a11y/media-alternative
Severity: serious
Check: manual a person reviews it; the report lists it as a checklist
Applies to: page
WCAG 2.2: 1.2.1, 1.2.3, 1.2.5, level AA
Taught by the skill: fe-a11y-media Media, motion and flashing
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/media-alternative