Accessibility

`a11y/video-captions`

Recorded video with speech or meaningful sound has synchronised captions, for example a <track kind="captions">.

criticalstaticWCAG 1.2.2 · Afe-a11y-media

Why

Without captions, people who are deaf or hard of hearing get nothing from the sound track, and so does everyone watching with the sound off. Auto-generated captions with errors in names and numbers do not count as an equivalent.

Fix

Ship a WebVTT file and add <track kind="captions" src="….vtt" srclang="en" label="English" default> inside <video>. Captions include who speaks and meaningful sounds. A video player library must expose its captions button; a silent background video should carry muted.

Examples

<!-- bad -->
<video controls src="launch.mp4"></video>
<!-- good -->
<video controls src="launch.mp4">
  <track kind="captions" src="launch.en.vtt" srclang="en" label="English" default>
</video>

Sources

Facts

Id: a11y/video-captions
Severity: critical
Check: static checked in the source by audit
Applies to: html angular vue svelte astro jsx
WCAG 2.2: 1.2.2, level A
Same problem in: axe-core video-caption
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/video-captions