Steps to Make Your Online Videos Accessible Part 1

Video is the fastest growing area of the Internet, so we get a lot of questions on how to make video accessible for those with disabilities. However, most people don’t realize that making video accessible benefits us all. Consider how delightful it would be if you could Google a phrase or description and have your search results include a three second clip from the middle of movie where someone speaks those words or sees something that you described. Accessible video is what is going to make that a reality.

Future aside, it’s never been easier to make video accessible than it is today.

There are three aspects to making video accessible:

1. Describe the things you’d miss experiencing if you could only hear the video (either in a transcript, or better yet as an audible description that is heard while “watching”).
2. Add subtitles (“captions”) that can read speech and other sounds that you’d miss if you can’t hear.
3. Present the video in an online player whose controls (Play, Pause, etc.) are usable by those who can’t see them or can’t use a mouse.

I have developed a recipe that covers all this and we’ll use the most popular player in the world, YouTube, as our example of how to get it done…to put a finer point on it, we’re talking about embedding an accessible YouTube video and the YouTube player on a website.

Not too long ago it wasn’t possible to embed a YouTube video accessibly. However, I’m pleased to report that it’s now doable and you can learn how to do this yourself: here’s a DIY recipe based on the same procedure our 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 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 an audience-readable sentence like this one, 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.”

Stay tuned next week for the second part of this post where we will explain how to make excellent captions and add a descriptive transcript.