Demo 07: Captions & Accessibility

Video with Captions Track

This video includes English captions using WebVTT format.

        <video controls>
  <source src="video.mp4" type="video/mp4">

  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
    default
  >

  <track
    kind="subtitles"
    src="subtitles-es.vtt"
    srclang="es"
    label="Español"
  >
</video>
      

Track Types Explained

The kind attribute specifies the purpose of each text track.

captions

Dialogue + sound effects for deaf/hard of hearing users

subtitles

Translation of dialogue for non-native speakers

descriptions

Narration of visual content for blind users

chapters

Navigation markers for jumping to sections

metadata

Machine-readable data for JavaScript

WebVTT Format

WebVTT (Web Video Text Tracks) is the standard caption format for HTML5 video.

WEBVTT 00:00:00.000 --> 00:00:04.000 Welcome to this tutorial on web video. 00:00:04.500 --> 00:00:08.000 Today we'll cover accessibility best practices. 00:00:08.500 --> 00:00:12.000 position:10%,line-left align:left [Typing sounds] 00:00:12.500 --> 00:00:16.000 <b>Important:</b> Always provide captions!

Pro Tip: Use services like YouTube's auto-caption feature as a starting point, then edit for accuracy. Tools like Descript and Otter.ai can generate transcripts that you convert to VTT format.

Styling Captions with CSS

Modern browsers support the ::cue pseudo-element for caption styling.

        video::cue {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
}

video::cue(b) {
  color: #fbbf24; /* Highlight bold text */
}

video::cue(i) {
  color: #a5b4fc; /* Style italic text */
}
      