This Wiki page is edited by participants of the HTML Accessibility Task Force. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Task Force participants, WAI, or W3C. It may also have some very useful information.

Media Chapters with Images

From HTML accessibility task force Wiki
Jump to: navigation, search

Text alternatives for video frames of chapters in Video

One request that has come up in discussions is that blind users would like to have the frames that come up from a navigation to cues in chapter tracks described by the screen reader.

We currently have the kind=metadata text tracks in HTML to experiment with such ideas.

Here's one idea for how it could be done.


Use a WebVTT file that describes the images, e.g.

WEBVTT

00:00:00.000 --> 00:00:10.700
<c.framedesc>Slide titled "HTML5 video accessibility and the WebVTT file format
March 23rd 2011, Silvia Pfeifffer"</c>
Title Slide

00:00:10.700 --> 00:00:47.600
<c.framedesc>Naomi Black stands in an auditorium at a podium</c>
Introduction by Naomi Black

00:00:47.600 --> 00:01:50.100
<c.framedesc>Silvia Pfeiffer stands in an auditorium at a podium</c>
Impact of Captions on the Web

00:01:50.100 --> 00:03:33.000
<c.framedesc>Slide titled "Requirements of a Web Text Format -
captions/subtitles, text video descriptions, navigation/chapters
metadata</c>
Requirements of a Video text format

00:03:33.000 --> 00:04:57.766
<c.framedesc>Slide with a WebVTT file example</c>
Simple WebVTT file

00:04:57.766 --> 00:06:16.666
<c.framedesc>Slide with a WebVTT formatted subtitles example file</c>
Styled WebVTT file

00:06:16.666 --> 00:07:37.900
<c.framedesc>Slide with a WebVTT for internationalization i18n</c>
Internationalized WebVTT file
</nav>

The classes could be mapped to divs that could be provided as aria-describedby links on the chapter's name.

For example:

getCueAsHTML(0):
<div id=framedesc0>Slide titled "HTML5 video accessibility and the WebVTT file format
March 23rd 2011, Silvia Pfeifffer"</div>
<p aria-describedby="framedesc0">Title Slide</p>
</p>