ADA Compliance Professionals

    Captions track required for videos

    Last updated:

    Who it helps:
    Blind
    Hearing
    Standard:
    WCAG 2.2 Level A

    Related Guides

    Video elements must include a captions track (kind="captions")

    Each video must provide closed captions using a <track> element with kind="captions". Captions need to cover dialog, speaker identification, and meaningful non-speech audio like music and effects. This applies to embedded HTML5 video and third‑party players.

    Why It Matters

    Without captions, people who are Deaf or hard of hearing cannot access the content of your videos. Missing captions also affect users in noisy or quiet environments where audio is off, and help non‑native speakers follow along. Accurate, synchronized captions improve comprehension and searchability for everyone.

    Common Causes

    • No <track> element added to the <video> at all.
    • Using kind="subtitles" instead of kind="captions" for the primary caption track.
    • Relying on burned‑in text (not toggleable or accessible to assistive tech).
    • Auto‑generated captions left unedited (poor accuracy, missing speakers/sounds).
    • Out‑of‑sync or incomplete WebVTT files (missing timing, long lines, gaps).
    • Wrong language codes, labels, or file paths that prevent loading.

    How to Fix

    1. Add a captions track to every prerecorded <video>.
      • Use a <track> element with kind="captions", srclang, label, and src pointing to a WebVTT (.vtt) file.
      • Provide a primary language track; include additional languages as needed.
    2. Author high‑quality captions.
      • Include all spoken words, identify speakers, and describe key sounds (e.g., [applause], [door slams], [music]).
      • Keep lines concise (typically ≤ 2 lines on screen) and time them to speech.
    3. Use WebVTT format.
      • Ensure valid cue timings and avoid large gaps or overlaps.
      • Recommendation: set the primary language captions as default for faster discovery.
    4. Verify player support.
      • For custom or third‑party players, enable the captions control and load VTT tracks.
      • Ensure captions remain available in full‑screen and on mobile.
    5. Meet WCAG 2.2.
      • SC 1.2.2 Captions (Prerecorded): required for prerecorded video with audio.
      • SC 1.2.4 Captions (Live): provide real‑time captions for live streams when applicable.
    Code
    WEBVTT

00:00:00.000 --> 00:00:02.500
[upbeat music]

00:00:02.500 --> 00:00:05.000

    Narrator: Welcome to our product tour.

    How to Test

    Keyboard

    • Tab to the video player; focus must reach the captions/CC control.
    • Toggle captions on/off using Enter/Space; verify visual change.

    Screen reader

    • Confirm the player announces a captions control and language options.
    • Play the video and ensure captions are visible and synchronized.

    Mobile/touch

    • Open the player controls; locate the CC button and select a language.
    • Rotate/enter full‑screen and verify captions remain readable.

    Checklist

    • A captions track loads without console/network errors.
    • Captions include dialog, speakers, and important non‑speech audio.
    • Timing matches speech; no long delays or overlaps.
    • Language codes (srclang) and labels are correct.
    • Primary captions available by default or easily discoverable in the UI.

    Good Example

    HTML
    <video controls width="640" height="360" preload="metadata">
  <source src="feature-video.mp4" type="video/mp4">
  <track kind="captions" src="movie.en.vtt" srclang="en" label="English" default>
  <track kind="captions" src="movie.es.vtt" srclang="es" label="Español">
</video>
    • WebVTT files contain dialog, speaker names, and key sounds.
    • English captions are set as default; users can switch to Spanish.

    Bad Example

    HTML
    <video controls width="640" height="360">
  <source src="promo.mp4" type="video/mp4">
  <!-- Wrong: subtitles used instead of captions, no non‑speech info, poor discoverability -->
  <track kind="subtitles" src="promo.en.vtt" srclang="en" label="EN">
</video>
    • No proper captions track; non‑speech audio is missing.
    • Users may not find or understand the track’s purpose.

    Quick Checklist

    • Every <video> has a <track kind="captions"> with a valid VTT file.
    • Captions cover dialog, speaker IDs, and meaningful sounds.
    • Cues are accurately timed, concise, and readable.
    • Primary language captions are easy to enable (or defaulted).
    • Language codes and labels match the track content.
    • Captions work with keyboard, screen readers, and on mobile.
    • Third‑party players load and expose captions controls properly.