The promise of HTML5 is a Web that works for everyone. Media accessibility through
captioning is an important part of that promise and an area that is still emerging
through standards work. Using the proposed HTML5 track element, developers can add
captioning to HTML5 video by pointing to a caption file that contains a written
representation of the dialog or actions in the video. Once the standards for captioning
converge, there will be less need for external add-ons to publish accessible video
content.
The following HTML fragment shows how the track element works:
<video>
<source
type="video/mp4"
src="video_file"></source>
<track
src="captions_file"
label="English captions"
kind="captions"
srclang="en-us"
default></track>
<track
src="descriptions_file"
label="English description"
kind="descriptions"
srclang="en-us"></track>
</video>
The W3C HTML5 specification allows for multiple caption formats. Internet Explorer
10 in the Windows Developer Preview supports the <track> element, but does
not download or display any caption files yet. We use this implementation to prototype
how different caption formats can be supported.
Last year at the
W3C TPAC meeting,
media accessibility was discussed with a proposal for the
accessibility requirements that HTML5 should support. Recently, a
Web Media Text Tracks Community Group was created to further work
on captioning solutions for the Web.
Even though we are not yet at the stage of a final HTML5 spec, it is stabilizing.
In order to provide better feedback on <track> and caption file formats, the
Internet Explorer and TwC Accessibility
teams partnered to build
a prototype that uses the element to display captions and descriptions on
a video.
We wanted to test a scenario were multiple formats are used to gather more feedback,
so we built the demo in such a way that both
TTML-1.0 and
WebVTT can be used. WebVTT
originated from W3C discussions last year after a need for simple
caption authoring was identified. TTML
is already an established standard for full-featured video captioning and supported
in Adobe Flash and Microsoft Silverlight. It is used on Netflix, Hulu and other
sites that display broadcast content.
The prototype uses the video and track elements to show how TTML and WebVTT formats
can be used to enable captions and descriptions on a video playback. The prototype
supports all HTML5-enabled browsers.
You can interact with the prototype at the
HTML5 Labs site. Use View Source or your browser’s developer tools to inspect the Javascript that parses
the TTML and WebVTT formats.
As always, we welcome your feedback.
—Frank Olivier, Senior Program Manager, Internet Explorer