You are viewing an archived copy of this website captured Fri Jan 04 16:08:56 AEDT 2013

JW Player

Making Video Accessible

Accessibility refers to the practice of ensuring your product is available to as many users as possible. Web accessibility refers to the practice of making websites usable for all people, particularly for those with disabilities, ensuring that everyone has equal access to all web content. The World Wide Web consortium (W3C) has established a set of guidelines known as Web Content Accessibility Guidelines, which attempts to provide a standardized and definitive set of rules for how to develop accessible online content. In this reference, we focus on how to achieve great reach and accessibility with online video. Topics covered are listed below:

Why Make Videos Accessible

Why make your videos accessible? Before jumping into the details of video accessibility, let's first address the question of why. To some, it may seem like additional work with a minimal payoff (i.e. targets only a small audience). However, making a video accessible is less time-consuming or expensive than you may think. Increasing your user accessibility is made easier by following web standards. For video production, the steps required to make your video fully accessible (i.e. appropriate captions) for the most part align with already existing web standards. For example, tagging your video clip with appropriate metadata is useful for SEO as well as for captioning.

Your audience is larger than you may think. Video accessibility benefits many different groups of users:

Google, your main SEO-driver, requires this same meta-data to better index your content in it search engines. Thus, making your videos accessible will absolutely help Google find and index them. Your small effort then has bit payoff: more and better targeted visitors to your site.

The last piece in deciding whether or not to make your videos accessible are government-based requirements. In many countries, providing accessible video is required for federal agencies and companies working with/for them. In the United States, this is covered by the Section 508 Amendment to the Rehabilitation Act. In many other countries (like the Netherlands), the W3C Web Content Accessibility Guidelines are used for similar legislation.

Accessibility Guidelines

So what does it take to make a video accessible? The raw guidelines (WCAG/508) are quite elaborate and can be technical), but here's what you generally need:

Progressive Enhancement
You should not assume that all of your visitors have certain plugins (Flash) or browser features (<video>, JavaScript) enabled. Instead, start out with a basic HTML setup (video download link with text description) and then enhance this with scripting and plugins as these features are detected.
No Autostart
Videos should not automatically start upon page load. This is frustrating to every visitor, but especially challenging to those who don't see or hear the video. These users have to use the keyboard to navigate through the page, find the videoplayer and then find the pause button.
Keyboard Controls
Videos should also be controllable by the keyboard (play/pause, mute/fullscreen, etc.). Essentially, you should guarantee that a user can "tab" through the controlbar. Hooking up custom keyboard controls is not useful; these are non-standardized and often break existing accessibility/access-key integrations.
Closed Captions
Captions are very similar to subtitles, but instead of just speech, all relevant audio is described (e.g. "the phone is ringing"). Captions are "closed" when they can be toggled on/off during playback. The alternative, captions burned into the video, is called "open". Making captions closed is important, because it allows you to serve everybody with the same setup (inclusiveness).
Closed Audio Description
An audio description is a second audio track with a voiceover that can be turned on/off (making it "closed"). Just like captions describe the audio, an audio description describes all relevant visual information. The voiceovers are placed into "natural silences", so they don't interfere with the original audio. Audio descriptions take time to produce, but are not always needed (e.g. not with interviews, which are talk-only).

The full list of guidelines only applies to on-demand video. For live video (and audio), an audio description is not needed. For on-demand audio (podcasts), captions are also not needed. Instead, a separate transcript (text version) of the audio file will suffice. In practice (workflow wise), it is often easier to use captions for audio clips too.

A Live Example Setup

Let's now look at real-life example of an accessible video. The clip below shows an excerpt from ITV's Coronation Street, as shown on the RNIB website:

Per the guideline on Progressive Enhancement, the clip is first presented as a basic download link. This download is in MP4 format, using H264 video and AAC audio. MP4 is the preferred option, supported by nearly every browser, device and media player today.

<p id="container">
    <a href="/upload/corrie.mp4">The video clip from ITV's Coronation Street</a> (MP4, 00:45)
</p>

Next, JavaScript is used to overwrite the download link with a JW Player instance. This only happens when JavaScript is enabled and when Flash/HTML5 are detected. JW Player first tries to embed the video using Flash (available on nearly all desktops), then tries HTML5 (available on nearly all devices). Instead of autostarting the video, a poster image is presented:

<script type="text/javascript">
    jwplayer("container").setup({
        autostart: 'false',
        file: '/assets/corrie.mp4',
        image: '/assets/corrie.jpg',

Finally, the Captions plugin and Audio Description plugin are used to load both a captions SRT and an audio description MP3 file. Both can be toggled on/off through a large, descriptive button in the display area. The plugins are automatically loaded by JW Player from our CDN:

        plugins: {
            captions: { file: '/assets/corrie.srt' },
            audiodescription: { file: '/assets/corrie.mp3' }
        }
    });
</script>

See this example page for a standalone setup that can be copy/pasted. Note that both JW Player and its Captions and Audio Description plugins provide various options for tweaking the setup.

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. Also, immediately above the player, hidden controls allow screen reader users to control the basic functionality of the player (Play / Mute / Stop).

Tips & Considerations

As with any real-world implementation, the above example is a simple suggestion for an accessible video. Here are some other things to keep in mind:

Work is in progress to build both captions and audio descriptions into HTML5. This is done through a new element: <track>. Though not built into any real-world browser yet, the spec is mostly done. This is how it will look:

<video controls height="360" src="/assets/corrie.mp4" width="640">
    <track label="Closed Captions" kind="captions" src="/assets/corrie-cc.vtt" />
    <track label="Audio Description" kind="descriptions" src="/assets/bunny-ad.vtt" />
</video>

Browsers and devices will see the tracks, pick up the VTT files and render controls to toggle them on/off. VTT files are basically SRT files with a few additions, so if you provide your captions in SRT today, you are fairly future-proof.

Important to note is that the audio description is also a VTT text file. The browser is supposed to load this file and provide text-to-speech synthesis. If this actually gets supported by browsers, the creation of audio descriptions will suddenly become a breeze! Adding in the easy keyboard access, it's clear that HTML5 holds much promise for a broader implementation of accessible video.

Alternative Approaches

Besides the JW Player for Flash, 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.

Note that the downloadable video file is an MP4. This is a high-quality format, which is very popular among mobile devices such as iPads / iPhones, the PSP and many smart phones. The MP4 format, though, isn't very useful if your target audience has older browsers or devices. It's fairly new and isn't 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 hard code the captions and audio description into the video.

Authoring Tools

Finally, here are some tools that can be used for creating the various assets:

Professional video editors like Final Cut Pro or Premiere have many more options for tweaking and exporting voiceovers. Therefore, it's good to make the audio description part of the production process if you regularly produce videos that need AD.

If you plan to use JW Player for embedding your videos, you should also take a look at our Bits on the Run video platform. It is free for low volume usage, automatically encodes any video to MP4 and supports SRT captions. Bits on the Run does all the embedding logic for you, meaning you only have to include a single line of code to embed a fully accessible video.