Captions (Prerecorded)

Who this affects

Deaf and hard-of-hearing users. Also anyone in a loud environment, in a quiet environment without headphones, or watching in a second language.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>A short tour of the shop</h1>

<!-- FAILURE: synchronised media - it has both picture and sound - with no
     captions track at all.

     Watch it with the sound off. The doorbell, the counter bell and the
     unanswered telephone are all gone, and nothing on screen replaces them.
     That soundtrack is information, and a deaf viewer never receives it. -->
<video controls width="640" src="../../assets/media/shop-tour.mp4"></video>

<!-- A second common failure: relying on the platform's automatic captions and
     never correcting them. Auto-captions routinely mangle names, technical
     terms and punctuation, and they almost never mark non-speech sound at all -
     so a clip like this one comes out completely blank. Uncorrected
     auto-captions do not meet 1.2.2. -->

<h1>A short tour of the shop</h1>

<!-- FIX: a captions track in WebVTT.
       kind="captions"  - captions, not subtitles. Subtitles translate dialogue
                          for people who can hear; captions serve people who
                          cannot, so they must include non-speech sound too.
       srclang="en"     - the language of the cues
       label="English"  - what the user sees in the track menu
     Because the file is loaded over HTTP, note that opening this page from
     the filesystem may block the track: browsers treat a VTT file as a
     cross-origin request under file://. Serve the site (npm run dev) to
     see captions working. -->
<video controls width="640">
  <source src="../../assets/media/shop-tour.mp4" type="video/mp4">
  <track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
         srclang="en" label="English" default>
  Your browser does not support HTML video.
</video>

<!-- The cues themselves, so you can read what good captions contain:

       00:00.500 --> 00:01.700
       [shop doorbell chimes]

       00:12.900 --> 00:15.500
       [telephone rings four times]

     Rules worth memorising:
       - put non-speech sound in square brackets
       - identify the speaker when it is not obvious: "ANNA: over here"
       - never let a cue outrun what a person can read, roughly 20 characters
         per second
       - caption what MATTERS: a clock ticking in a thriller is information,
         the same clock in an interview is not -->

How to test it

Play every video with sound off. Confirm captions are synchronised, accurate, identify speakers, and include relevant sounds such as [door slams]. Auto-generated captions with no human correction routinely fail on names, technical terms, and punctuation.

• Automated

  A scanner can detect that a track element with kind="captions" is absent. It cannot verify caption accuracy, synchronisation, or completeness.

  Relevant axe rules:

  • video-caption

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.2.4 Captions (Live) (Level AA)
• 1.2.8 Media Alternative (Prerecorded) (Level AAA)
• 1.4.2 Audio Control (Level A)

In the specification

• Understanding 1.2.2 Captions (Prerecorded) — the W3C explanation, intent and exceptions
• 1.2.2 in the WCAG 2.2 Recommendation — the normative wording