May 15 is Global Accessibility Awareness Day (GAAD), so it’s the perfect time to share some tips on designing accessible experiences.
Lately the question we’ve received most on that front is whether it’s possible to make a YouTube video accessible, and if so, how? To put a finer point on it, we’re talking about embedding an accessible YouTube video and the YouTube player on a website.
David Berman demonstrates five reasons why we should care about digital accessibility. For a version of this video with audio description, visit wcag2.com
Not too long ago the answer was a sad “No,” but now I’m pleased that we can say “Yes… if you follow a careful recipe.” Here’s a DIY recipe based on the same procedure my team uses for our clients.
You’ll understand the recipe more easily if you understand the challenge: we not only have to make the video itself accessible (with transcripts, captions, and/or descriptive video); we also have to make sure the player itself has accessible controls.
Youtube.com itself is, unfortunately, not a sufficiently accessible website (for example, it fails the Focus Visible criterion), so sending audience members there for an accessible alternative won’t work.
Instead our plan is to embed an accessible video in an accessible configuration of the YouTube player, directly within your web page–all this to comply with the pertinent Level A criteria of WCAG 2.0 (1.2.1, 1.2.2, 1.2.3, 2.1.1, 2.1.2) and perhaps also Level AA criteria as well (1.2.4, 1.2.5). If you’re striving for Ontario’s AODA compliance, consider that AODA currently exempts 1.2.4 and 1.2.5.
Step 1: Solving the keyboard navigation challenge
YouTube offers several versions of its embeddable player, including an HTML5 version and a Flash version. The Flash version is not accessible for people who must use a keyboard to navigate (it fails both the Keyboard rule and the Keyboard Trap rule on all major browsers). However, the HTML5 version is accessible.
Conveniently, the HTML5 player is automatically used on Android and iOS devices. For other devices however, we need to force its use by following these three steps:
1. Upload your video as an mp4 file, no other format (if it’s already online, download it as mp4, then reupload)
2. Change the HTML code that embeds the player from src=”//www.youtube.com/embed/VIRx3RJzbZg” to src=”//www.youtube.com/embed/VIRx3RJzbZg?html5=1″ (swapping in the unique code that YouTube supplies for your video)
3. Because there are some situations where Internet Explorer and Firefox will still fail to load the HTML5 player, add this audience-readable sentence, in a small type size, immediately preceding the first video on each web page that contains video(s): “For a fully keyboard-accessible alternative to this video, view it in Chrome or on any Android or iOS device, view it in Firefox with the YouTube ALL HTML5 add-on installed, or disable Flash in Internet Explorer.”
Step 2: Making excellent captions, the easy way
YouTube has the magical ability to automatically generate fairly accurate captions for uploaded videos, saving you much effort and drudgery. However, these automatic captions are never good enough, and sometimes quite bad if there are multiple speakers or background noise.
We’ll start with what YouTube provides, then improve upon it manually.
1. Upload your finished video (never start captioning until the video is final!) to your YouTube channel. Set it to Private (as we don’t want to share it with the world yet), then wait several hours for YouTube to generate its captions. The longer the video, the longer it takes.
2. Now, use YouTube’s caption editor to clean the following:
- Words: fix spelling, and remove “ummms” that get in the way of understanding
- Pacing: shift words to the next or preceding caption to ensure complete phrases never bridge two captions (i.e. nouns and verbs are connected to their modifiers, and prepositional phrases are not separated)
- Consider deleting any time segments which are left blank, then select the timer on your full-sentence caption and increase the time to run for the duration of the full sentence. The idea is to steal time from pauses to fit in the full text, in situations where it’s difficult to get all the words in… but not to go as far as to replace pauses that are part of “the story”
Captioning is an art, however here are some guidelines to help you get started:
- No caption should appear for less than two seconds
- Add descriptions of sound in square brackets (such as [music] or [laughter]) to help people understand what is happening
- If there’s more than one speaker, add tags like ”>>BERMAN:”, at the beginning of a new line, to identify speakers or change of speaker
- If someone is spelling a word, caption it with hyphens, as in S-P-E-L-L-I-N-G
Step 3: Adding a descriptive transcript
To achieve Level A compliance, you need to include either a descriptive text transcript or an audio description (WCAG 2.0 1.2.3). Most people will choose the former because audio descriptions take more effort.
YouTube wonderfully provides a transcript button, enabling the viewer to read all the captions in one place. But a transcript of just the captions is not sufficient: we need descriptive text transcripts.
So what you’re going to do is take the complete transcript of your captions and add descriptive text that relates what else is going in the video (“location shot”, actions, body language, scene changes, etc.). Then add a “Transcript” button directly below the video on your web page, and have it link to a separate HTML page containing the transcript.
To see an example of what the finished product will look like, visit davidberman.com/accessibility.
How to create the descriptive text transcript:
1. Go to the YouTube video’s Transcript (select the Transcript icon) and copy and paste it to a text file.
2. Use a text editor to remove the timecode by hand… or save time by downloading the .srt file from YouTube’s caption editor, and using the free software Aegisub for Windows, Mac, or Unix (download at Aegisub.org) to remove the timecode.
3. To avoid broken sentences, search and replace any extra hard-returns. Also replace all line endings with single spaces.
4. Insert any descriptive text (you can conveniently take text from an audio description script if you happen to have one). For example: “The speaker is sitting in an armchair in front of a fireplace. Throughout the entire video, he addresses the camera directly.”
5. Insert the resulting text into the page on your website that is linked to the “transcript” link below the video.
Keep in mind that you could have, instead, provided an audio-description version (or perhaps even a Level AAA extended audio version) of your video, in which you don’t need a descriptive text transcript. (For an example of an extended audio description, please see the video at wcag2.com.) We’ll explain how to script and record your own audio descriptions in a future article!
So there you have it. A recipe for accessible video, without losing all the convenience and reach of YouTube! Have deeper questions on this? Ping me!
(Thank you to Heather McAlister at Carleton University for her help with this blog post!)
Reviewed May 21, 2014