HTML5
Media Accessibility
Update

Silvia Pfeiffer

LCA 2011

1
Key Focus Media Accessibility
  • Captions and Subtitles
  • Audio Descriptions
  • External Text Files
  • In-band content
2
Captions, Subtitles, Text Descriptions
WEBVTT FILE

1
00:01:47.250 --> 00:01:50.500
This blade has a dark past.

2
00:01:51.800 --> 00:01:55.800
It has shed much innocent blood.

3
00:01:58.000 --> 00:02:01.450
You're a fool for traveling alone,
so completely unprepared.

4
00:02:01.750 --> 00:02:04.800
You're lucky your blood's still flowing.
3
Captions, Subtitles, Text Descriptions
WEBVTT FILE

00:00:15.000 --> 00:00:17.950 A:end D:vertical
在左边我们可以看到...

00:00:18.160 --> 00:00:20.080 A:end D:vertical
在右边我们可以看到...

00:00:20.110 --> 00:00:21.960 A:end D:vertical S:70%
...捕蝇草械.
4
Markup

The <track> Element

<video src="media/sintel.ogv" poster="media/poster_sintel.png" controls width="50%">

  <track kind="subtitles" src="text/sintel_en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="text/sintel_fr.vtt" srclang="fr" label="Français">
  <track kind="subtitles" src="text/sinel_de.vtt" srclang="de" label="Deutsch">

  <track kind="captions" src="text/sintel_cap.vtt" srclang="en" label="English">

  <track kind="descriptions" src="text/sintel_desc.vtt" srclang="en" label="English">

  <track kind="chapters" src="text/sintel_chap.vtt" srclang="en" label="English">

</video>
5
Next Steps
  • WebVTT format improvements
  • JS implementations
  • Browser Vendors to support markup and format
6