Question

我建立的网站必须达到与WCAG的AA一致性。

我们将提供视频，并且要做到这一点必须有一个这个视频的成绩单，我的问题是，在HTML中是正确的顺序，把这个成绩单放在之前，之后。有一个有效的标签符合这一点。

感谢您的时间。

Answer 1

理想情况下，成绩单应放在视频之前。没有专门用于成绩单的标签 - 您需要使用段落标签和任何其他有用的标记（如标题，强项，重点等）标记语音和说明。我喜欢使用视频上方的链接来显示/隐藏成绩单，因此它不会在页面上占用太多空间，直到用户决定要阅读它为止。这个list of accessible media player resources应该会给你一些很好的例子。

Answer 2

WCAG为Success Criterion 1.2.2 - Captions (Prerecorded)

提供了两种技巧

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

如果您的视频是"media alternative for text"，则必须明确标记。问题是“Using aria-labelledby to provide a text alternative for non-text content”缺少浏览器支持，但您仍然可以使用它。我的意见是成绩单应该由aria-describedby链接。但是，对于不使用屏幕阅读器的用户，您必须明确（和可见）文本的作用。在阅读文本并意识到文本是其成绩单之后开始观看视频总是很烦人。

我想说最好是使用以下内容（使用track用于隐藏字幕和/或在视频之前明确宣布的成绩单，并在之后表明）：

  <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="subtitles" label="English subtitles" src="subtitles.vtt" srclang="en" default></track>
  </video>
  <div id="transcript">
      <strong>Transcript of the video:</strong>
      Transcript here
  </div>

注意：您不应该使用object（H53 technique）元素的主体，因为现代屏幕阅读器不支持这种元素可以处理小程序导航

Answer 3

感谢您的帮助！我做了我的研究，最后的答案是匹配正确的咏叹调属性和一些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？

3 个答案: