Bruce Lawson’s personal site

Accessibility of HTML 5 video

(Last Updated on )

Philosophically, the accessibility of HTML 5 video is a beautiful thing.

There is no fall-back accessibility content; instead, it’s just a link to the video and, perhaps, a transcript:

<video src="movie.ogg">
Your browser is not video-enabled; <a href="movie.ogg">download the video</a> and <a href="movie.txt">transcript</a>.
</video>

There is no “alternate text” attribute. Instead, each video is expected to carry its own synchronised captions—not “burned onto” the video, but in some kind of time-stamped text file so the browser can access it and display it over the video for users who require it. As an added bonus, search engines would be able to access this information.

The reason is good. Many videos are hosted in one place (for example, YouTube, DailyMotion etc) and embedded in many other sites. It’s highly unlikely that people embedding those videos would copy accessibility information, so it’s better that the video creator bags it all up together.

But what format to use? Given that discussions about the best video codec at an impasse, discussions about accessibility formats are unlikely to advance. This is not a fault of those who specify the language; it’s a problem of codecs, patents and closed standards vs open standards. (Related: Video of open video codecs discussion at Mozilla, and Mozilla’s General Counsel on Theora patents.)

But the situation is urgent. Sasquatch-wrestlin’ John Foliot writes that in the USA the The Twenty-first Century Communications and Video Accessibility Act of 2009 was introduced last month, and if enacted, big video sites like YouTube would might need to provide captioning (that’s obviously something for the lawyers to work out).

In an excellent post The most pressing Accessibility issue in HTML5 today? <video> (which I urge you to read), John describes how captioning, like video itself, can already be accomplished through plugins.

If HTML 5 video is going to catch on (and we all hope plugin-less video that can be manipulated with scripting, integrate with canvas and SVG will catch on), it needs to be able to compete with plugins, especially if The Twenty-first Century Communications and Video Accessibility Act of 2009 looks close to becoming law.

Meanwhile, Sylvia Pfeiffer is plugging away at adding captioning to HTML 5 video, and is looking for your feedback.

Added January 2010: I made a demo of HTML5 video with accessible captions, taken from a transcript and synchronised with JavaScript.

20 Responses to “ Accessibility of HTML 5 video ”

Comment by Anne van Kesteren

What do you mean with “YouTube would need to provide captioning”? Reading through that bill it seems to contain a number of loopholes (e.g. “undue burden”), but I’m not a lawyer and haven’t read all of the text.

Comment by Bruce

I’m taking my info from John’s post here, Anne, as I’m not a yankee. (Neither is he, but at least he lives there.)

Comment by Anne van Kesteren

Before some asshole criticizes me again of being anti-accessibility. I of course agree that we need to solve this issue, but I’m not really convinced it is a problem of HTML5. It is more an issue with the video container formats under discussion. HTML5 cannot really do anything to change that.

Comment by Bruce

Agree Anne. But if we (as browser manufacturers/ web developers) can get agreement on which codec the browsers can use, then there is more of a chance that we’ll be able to advance the discussion to which time-stamped text file format should be wrapped up in it to carry transcription.

HTML 5 tried to specify Ogg Theora, but Apple will not support it.

Comment by zcorpan

A transcript would be useful for everyone, not just users with non-video browsers, so the link to the transcript should probably go outside the video element.

Comment by Bruce

@anne – so should we expect that the spec will standardise a “transcript” codec, as it tried to do with a video codec, to help interoperability?

@zcorpan – it’s markup for the wonderful world in which the video-enabled browser UI allows you to see the captions superimposed on the screen synchronised via their timestamp, or download them as you want.

Comment by Philip Jägenstedt

I truly doubt that embedded subtitles are going to be the solution to this. Tools for embedding subtitles in existing files mostly don’t exist and there isn’t really an established format to use, at least not for Ogg. Tool support for external subtitles is much better and it doesn’t require remuxing the video file for every additional language/spelling fix. Also, given the different media libraries used in different browsers (QuickTime, FFmpeg, GStreamer, liboggplay) I doubt that embedded subtitles have any chance of making it intact through all the layers cross-browser in a reliable manner.

Comment by Bruce

@Philip – as you are Opera’s Captain Video™, what do you advise those of us who want to provide captions (that aren’t burned on) and/or transcripts?

Comment by Philip Jägenstedt

@Bruce, for the time being I’m afraid that there is no perfect solution. You can use a script to parse SRT and update text based on time (setTimeout or timeupdate event), but that isn’t very elegant. I hope that we can work with Mozilla and Apple on something similar to what Silvia Pfeiffer presents in http://blog.gingertech.net/2009/07/29/first-experiments-with-itext/ Although I haven’t looked at the source code, I assume that this demo uses the less than elegant method as a proof of concept.

The essence of it is that one provides an external subtitle/caption file in the markup, which the browser then syncs with the video. I’d be delighted to see more people working in finding good solutions for this, as it isn’t exactly a trivial problem (bouncing ball karaoke with animated color, anyone?)

However, the API and user experience should be the same regardless of whether the subtitles are internal or external to the video file, but external is much easier to begin with.

Comment by Philip Jägenstedt

One also shouldn’t forget our good friend SVG. If only the video and SVG timelines are in sync, one could simply use declarative animations to do all kinds of fancy things on top of the video, including bouncing karaoke balls!

Comment by Bruce

You got a demo lurking around, Philip?

Brucelawson.co.uk readers are great fans of SVG bouncing karaoke balls. Or would be, if a nice Swede actually gave us one.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.