视频的转录本应该如何显示才能完成 WCAG 2.0？

Question

我正在构建一个必须达到 WCAG AA 一致性的网站。

我们将提供视频，要做到这一点，必须有该视频的文字记录，我的问题是，在 html 中，将此文字记录放在之前、之后的正确顺序是正确的。有一个有效的标签符合此要求。

感谢您的宝贵时间。

Answer 1

理想情况下，文字记录应放在视频之前。没有专门用于成绩单的标签 - 您需要使用段落标签和任何其他有用的标记（如标题、强、强调等）来标记演讲和描述。我喜欢在视频上方使用 link show/hide 文字记录，以便在用户决定阅读之前不会占用太多页面空间。这个 list of accessible media player resources 应该会给你一些很好的例子。

Answer 2

WCAG 为 Success Criterion 1.2.2 - Captions (Prerecorded)

提供了两种技术

处理这两种情况的最佳方法是使用 HTML5 <track> 标签来指定字幕。

如果你的视频是"media alternative for text" you have to clearly label it as such. Problem is that "Using aria-labelledby to provide a text alternative for non-text content”，虽然没有浏览器支持，但还是可以用的。我的意见是，成绩单应该用aria-describedby链接。但是，对于不支持的用户来说，使用屏幕阅读器，你必须清楚（和可见）文本的作用。在阅读文本并意识到文本是它的抄本后开始观看视频总是很烦人。

我会说最好是使用类似下面的东西（使用 track 隐藏式字幕 and/or 在视频之前清楚地宣布并在之后如此指示的文字记录）：

  <h2 id="title">Title of my video</h2> (<a href="#transcript">see transcript</a>)
  <video src="foo.ogv" aria-labelledby="title" aria-describedby="transcript">
    <track kind="captions" label="English captions" src="captions.vtt" srclang="en" default></track>
  </video>
  <div id="transcript">
      <strong>Transcript of the video:</strong>
      Transcript here
  </div>

注意：您不应使用 object (H53 technique) 元素的正文，因为可以使用小程序处理导航的现代屏幕阅读器不支持此内容

Answer 3

感谢你们的帮助！我做了我的研究，最终的答案是匹配正确的 aria 属性和一些 html5。

<figure>
            <div class="video">
                <video id="main_video" controls >
                    <source src="<?php echo $source_video?>" type="<?php echo $video_source['mime_type']?>">
                    <source src="<?php echo $source_video_2; ?>" type="video/webm">
                </video>
            </div>

            <details >
                <summary aria-controls="transcript_content" tabindex="0" aria-expanded="false" id="show-hide-transcript" > Transcript </summary>
                <div id="transcript_content" aria-live="off" aria-atomic="true" aria-relevant="all" tabindex="0" aria-expanded="false" role="article"  ><?php echo $video_transcript ?></div>
            </details>
        </figure>

视频的转录本应该如何显示才能完成 WCAG 2.0？

How the transcript of a video should be visible to accomplish WCAG 2.0?

html

video

html5-video

accessibility

wcag2.0