Digithoughts

Quick link to the demo for the impatient.

How would you feel if I told you that I had a web solution that could get you good publicity, improve your SEO, avoid the risk of getting sued and, best of all, I made it easy for you?

With accessible HTML5 video, we can give you all of that. This post shows you how.

Why We Care

Recently, President Obama signed “The 21st Century Communications and Video Accessibility Act” in to law. With the debatable exception of e-commerce stores and the Americans with Disabilities Act, the government has stayed out of passing actual laws regulating online accessibility. Everything, so far, has been a more of a guideline, without any legal backing.

Here's the text of the bill:
http://www.govtrack.us/congress/billtext.xpd?bill=s111-3304
 
Section 202-F-3-B:
 
‘(3) INQUIRIES ON FURTHER VIDEO DESCRIPTION REQUIREMENTS- The Commission shall commence the following inquiries not later than 1 year after the completion of the phase-in of the reinstated regulations and shall report to Congress 1 year thereafter on the findings for each of the following:
 
‘(B) VIDEO DESCRIPTION IN VIDEO PROGRAMMING DISTRIBUTED ON THE INTERNET- The technical and operational issues, costs, and benefits of providing video descriptions for video programming that is delivered using Internet protocol.‘

In the short term, it doesn’t directly affect most websites. In classic government compromise form, it talks a lot about committees being required to look in to things that, even then, will only apply if the burden isn’t too great.

It is, however, a sign change is coming. Section 508 has become a common requirement for many new site builds, even outside of government procurement. WCAG 2.0 is coming.

Back to “The 21st Century Communications and Video Accessibility Act,” This bill talks about requiring video descriptors (text based descriptions of what’s happening in the video) that can be read by accessibility tools. At first, it’s going to be more of a requirement for TV companies but you can count on it making its way to the Web too.

Save Us HTML5, You’re Our Only Hope!

HTML5 does several great things for us:

• Video and audio players come built into the browser.
• They can control, and be controlled by, JavaScript.
• The interfaces are the same – the code to make videos accessible can make audio accessible with no extra work.
• They connect out to HTML which has a long history of being built with accessibility in mind.

We can combine all of that by:

1. We add HTML5 video (or audio) to our page.
2. We add the captions in list form.
   • The list of captions references the video they are for.
   • Each caption has a timestamp.
3. We add the JavaScript
   • If the JavaScript is disabled, that’s totally fine – we still have a nice, clear transcript on the page.
   • If the JavaScript does run, give the user the option to hide all of the captions, show all of them, or just show the current one for the video.
   • If they choose to just see the current one, bind to the video player so that every time the video updates, we find the current caption and hide all of the others.
4. We repeat for descriptors.

What That Gives Us

See the quick and simple proof of concept here.

It could use a little tidying up but it can already do the following:

Helps Those With Hearing Issues

Captions are now available. They can be watched in sync with the video/audio or viewed as one long transcript.

Helps Those With Visual Issues

Video descriptors are now available. As with captions, they can be watched in sync with the video/audio or as one long transcript.

Because they are HTML text, screen readers can read them (even if the screen reader can’t keep up with the JavaScript updating, it can be switched to full transcript mode).

Because they are HTML text, that text can be scaled as large as the user needs, allowing those with limited vision, but who are capable of reading large text, to read rather than rely on screen readers.

Helps Those With Cognitive Issues

One of the requirements since the days of WCAG 1.0 is that users should have the ability to consume content at their own pace and there should be a means for pausing automatically updating regions of the page.

In addition to play/pause controls in the video/audio itself, the full transcript mode offers users the ability to read at whatever speed works for them.

Does Not Require JavaScript

Many accessibility tools do not play nicely with JavaScript. That’s not a problem. The code progressively enhances the page but, even with JavaScript turned off, full, clear transcripts remain available.

Greatly improves SEO

Just like alt tags are essential on images so search engines can index them, our pages can now tell search engines what the audio in the video says, what text appears in the video and even descriptions of what can be seen.

Great Karma

Leading the industry in your consideration of your users is never a bad thing. Not only do you build the loyalty of your users, it never hurts to lead the pack in terms of eligibility for awards and press coverage for accessibility.

Keeps Lawyers At Bay

Adding synchronized captions and descriptors, along with full transcripts, keeps you well ahead of current accessibility law. For example, Target recently settled their lawsuit with the National Federation for the Blind for 6 million dollars and that doesn’t even include what it cost to simply fight in the first place. Staying several steps ahead helps you avoid such situations. It also ensures that, as new laws do get signed in, you are already comfortably ahead and don’t have any expensive rush to rebuild.

It’s Great For Regular Users

How many times have you had trouble embedding a video on a blog? Or wanted to get a quote from a video but it’s been a pain to watch through, hunting for that one quote again? Now users have an easily accessible source to copy and paste from, encouraging cross promotion.

Last week, the New York Times reported that almost 20% of online video users drop off within the first ten seconds and 44.1% don’t make it through the first minute – and that’s before we factor in those who don’t even begin. Clearly, video isn’t serving all of our users, the ones who want to quickly know what’s going to be covered before deciding whether to invest the time. A quick scan of the transcript may get more viewers interested in watching the whole thing and it saves the time of those who weren’t interested anyway, increasing the perceived value of your site.

Nicholas Davison Director of Web Development

Read more from the Engineering category. If you would like to leave a comment, click here: Comment or stay up to date with this post via RSS, or you can Trackback from your site.