Making Video Accessible

Accessibility Guidelines

Let's first have a look at accessibility for the physically disabled. The W3C consortium has developed a set of guidelines known as the Web Content Accessibility Guidelines (WCAG 1.0).Introduced in 1999, these guidelines have since been widely adopted. A second version (WCAG 2.0) is currently in draft and may replace the previous version. Here's an overview of the current standards:

	WCAG 1.0			WCAG 2.0
importance of the content	A	AA	AAA	A	AA	AAA
(closed) captions	X	X	X	X*	X	X
(closed) audio description	X	X	X	X*	X	X
full text alternative				X*		X
sign language						X

* Choose at least one of the three options.

As you can see, according to the W3C, captions should be available for every published video. Captions are defined as "synchronized text equivalents of audio information in the same language as the audio, conveying not only speech content, but also non-speech information such as sound effects, music, laughter, and speaker identification and location." Closed captions must be able to be turned on or off at will. Non-closed (open) captions are printed on the video itself

The second important element is audio description, which makes video accessible to people who are unable to see it. It provides information about movements or actions that are important to comprehending the content and cannot be understood from the audio information alone. WCAG 1.0 always requires an audio description, while WCAG 2.0 permits you to replace it with a text description, but only for your least important content.

In addition to the requirements in the table above, two other generally accepted rules of thumb are:

1. Don't play a video without the user activating it (this means no autoplay).
2. Don't substitute HTML or text files for captions and audio descriptions

Note that the WCAG 1.0 contains less requirements for live video, decorative video and audio. Eric Velleman from Accessibility.nl has written a detailed document on this topic, which is also available in Dutch.

Accessibility Example

A properly accessible video should contain captions and an audio description. Let's see how this works in a real-life example. The video below shows an excerpt from ITV's Coronation Street, as shown on the RNIB website:

1. play/pause the video
2. mute/unmute the video
3. rewind and stop the video

The video is played back in the JW FLV Player. It's the only player available that can display both closed captions and a closed audio description. Since it is built in Adobe's Flash, >95% of your visitors will be able to watch it.

Other accessibility features of this player are its keyboard controls (using the TAB and SPACE controls), its screen reader-labeled buttons and the full screen button to make the video as large as your screen. Also, immediately above the player, hidden controls allow screen reader users to control the basic functionality of the player (play / mute / stop).

This example uses the SWFObject JavaScript to detect if your visitors have the right Flash Plugin (and JavaScript) installed. If so, the player is shown. I. If not, the player falls back to show an image linking to a downloadable video file. You can see a demonstration of how this works by turning off your browser’s JavaScript and reloading this page. Again, both the image and link have a text label for screen readers.

Example Codes

Here's the actual code used for the Accessibility example above.

<p id="video">
  <a href="corrie.mp4" title="download the MP4 excerpt">
    <img src="corrie.jpg" width="470" height="300" 
      alt="a small excerpt from ITV's Coronation Street" />
  </a>
</p>

<script type="text/javascript">
  var sa = new SWFObject('player.swf','mpl','470','300','9');
  sa.addParam("allowfullscreen","true");
  sa.addParam("allowscriptaccess","always");
  sa.addParam("seamlesstabbing","true");
  sa.addParam("flashvars","file=/upload/corrie.flv&image=/upload/corrie.jpg&captions.file=/upload/corrie.xml&audiodescription.file=/upload/corrie.mp3&plugins=captions-1,audiodescription-1");
  sa.write('video');
</script>

And this is what the TimedText XML file looks like:

<tt xmlns="http://www.w3.org/2006/10/ttaf1">
  <body>
    <div xml:id="captions">
      <p begin="00:08" end="00:10">- Nothing is going on.</p>
      <p begin="00:10" end="00:12.5">You liar!</p>
      <p begin="00:13" end="00:15">Are you?</p>
      <p begin="00:17" end="00:20">Violet, please!<br/>- I am not your babe!</p>
      <p begin="00:24" end="00:29">You stupid cow,<br/>look what you gone and done now, ay.</p>
      <p begin="00:34" end="00:36">Vi, please.<br/>- Leave me alone!</p>
      <p begin="00:36" end="00:38.5">- We need to talk.<br/>- Jason, are you deaf?!</p>
      <p begin="00:41" end="00:43">What's going on?</p>
      <p begin="00:43" end="00:45">Get out there and try to salvage this!</p>
    </div>
  </body>
</tt>

This setup can be tweaked a bit to further enhance the quality. Some methods are listed below:

1. Use the captions.fontsize flashvar to change the size of the captions font. (default = 14).
2. Set the captions.back flashvar to "true" to show a semitransparent backdrop that makes the captions more readable.
3. Set the captions.state flashvar to "false" to turn off the captions by default.
4. Use the audiodescription.volume flashvars to change the volume of the audio description (default = 90).
5. Set the audiodescription.state flashvar to "false" to turn off audio descriptions by default.
6. Use a full JavaScript API to extend the hidden controls above the player.
7. Use the upcoming Accessibility Plugin to toggle on / off audio and captions.

Alternative Approaches

Besides the JW FLV Player, Windows Media and QuickTime both support closed captions, with SAMI format and QTtext / 3GPP Text support, respectively. However, neither of these players support a closed audio description.

One interesting accessibility method is used by the Dutch government; they have a multi-layered embed method (source code available). First, the multi-layered embed tries to detect Flash. If not available, next it tries QuickTime and finally Windows Media Player. If none of these players are detected, they offer a video’s full text transcription along with both a WMV and an MP4 download link on the page. Here's an example video (bottom of the page).

Note that the downloadable video file is an MP4. This is a high quality format, which is very popular among mobile devices such as iPods / iPhones, the PSP and various smart phones. However, the MP4 format isn't very useful if your target audience has old browsers / devices. It's fairly new and not supported by the default Windows installations. If your goal is to maximize reach, it’s best to encode any download as an MPG; its quality relative to file size is poor, but it’s able to play on just about everything. If you want to maximize accessibility even further, you can always hardcode the captions and audio description into the video.

Authoring Tools

There's a whole range of applications that can transcode your original video files into whatever format you’d like (e.g. FLV, MP4, WMV, MPG). There’s a helpful list in the links to some interesting applicationsFLV Compression Tutorial.

Unfortunately, there are only few applications available for creating closed captions:

1. NCAM's magPIE (free, also for MAC)
2. URUSoft's Subtitle Workshop (free)
3. Manitu Group's Captionate ($60)
4. VideoToolShed's SubBits subtitler (€ 169)

Both magPIE and Subtitle Workshop support the export of captions to W3C's TimedText (Flash), SMIL/QTtext (Quicktime) and ASX/SAMI (Windows Media). For Subtitle Workshop you need the TimedText output script (available from Naomi Spirit). Captionate, (intended for FLV video) can only export to W3C's TimedText, though it can also save captions as metadata.

Only magPIE has support for recording audio descriptions, but it’s somewhat limited. You cannot record to MP3 and cannot merge recorded samples or integrate them with a video. For now, a full-fledged audio / video suite like Adobe's Premiere / Audition or Apple's iMovie / GarageBand is needed for creating closed audio descriptions.