Adding Captions to Videos on Web Pages

• U of A
• Accessibility
• Technology
• Creating Accessible Videos
• Adding Captions to Videos on Web Pages

HTML5 introduced two new elements, <audio> and <video>, which make it easy to add media files to web pages, and in some browsers (especially Internet Explorer) the default media player is highly accessible for keyboard users and screen reader users.

When adding video to a web page, it is important to add captions. In HTML5 this is done with the <track> element. In the following example, a video file named myvideo is provided in both MP4 and WebM formats to ensure cross-browser compatibility. English captions are provided in Web Video Text Tracks (WebVTT) format using the <track> element.

  <video
  preload
  =
  "auto"
  width
  =
  "480"
  height
  =
  "360"
  poster
  =
  "myvideo.jpg"
  >
  <source
  type
  =
  "video/mp4"
  src
  =
  "myvideo.mp4"
  />
  <source
  type
  =
  "video/webm"
  src
  =
  "myvideo.webm"
  />
  <track
  kind
  =
  "captions"
  src
  =
  "myvideo.vtt"
  />
  </video>

HTML5 also includes a powerful API that enables developers to create their own media players. One such player called Able Player includes a wide variety of features and was specifically designed with accessibility in mind. It was originally developed at the University of Washington and is now maintained as an open-source project on GitHub. Able Player is the player used on the DO-IT Video site.