Playing Accessible Media

Status: This is an incomplete, unapproved draft. The current draft is at wai-media-guide.netlify.com/

Captions

Desktop-browser media players

All modern Web browsers will provide default media players for embedded media when they detect the video or audio elements, and all will render timed text delivered via the track element. Browsers will also automatically surface a caption toggle in the player control bar if a caption track is detected. Note that each browser will present not only a different UI, but also a different default style for captions. Below is an image of default caption display in Chrome, showing the CC (closed-caption) button for toggling captions on and off.

Captions playing in the embedded Chrome video player.

While browser-native players do not provide support for integrated transcripts, some third-party embedded players (for example, YouTube and Able Player) will surface a button which, when selected, reveals a transcript if one is available.

Mobile-browser video players

Mobile browsers support captions via the track element, just like their desktop counterparts, but the presentation mode will vary:

  • Android
    Embedded video and audio clips will play within Web pages in both Chrome and Firefox, on tablets and smartphones.
  • iOS
    Embedded video and audio clips will play within Web pages on the iPad. iPhones will play all media clips using the QuickTime player, separately from the browser.

Audio descriptions in native desktop- and mobile-browser media players

Most audio-described videos are delivered to viewers using one of the following methods:

  • Two separate videos, one with open descriptions, and the other with no descriptions. Authors give users a link or some other method to choose one or the other.
  • A single video that contains two audio tracks, one with descriptions and one without. Authors give users a button or menu to toggle from one track to the other.

User customization of captions

Many online media players, on both desktop and mobile platforms, give users a wide variety of caption-customization options. For example, users can specify caption-font colors, font types and sizes, and background colors or transparency levels. Note that in any player on any operating system, the settings chosen by the user will override any author-specified styling characteristics (see further comments about author styling of captions).

Below is an image showing caption-styling options in a desktop player.

YouTube's caption-styling options: font family, font color, font size, and others.

Some custom mobile players– those embedded in Web pages as well as stand-alone media players– also provide styling options from within the applications themselves. See the mobile player used on the CNN Web site for one such example (play a video and press the CC button on the player to see captions).

Mobile devices also provide caption-styling options at the OS level. Here is an image showing caption styling options on an Android device.

Android's caption-styling options: language, text size, caption style, etc.

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combines the following WCAG 2.0 success criteria and techniques from different conformance levels:

Success Criteria:

  • 1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

  • 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media. (Level AA)