3

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

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

谢谢你的时间。

4

3 回答 3

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>
于 2016-10-11T00:13:55.410 回答
2

理想情况下，成绩单应放在视频之前。没有专门用于成绩单的标签 - 您需要使用段落标签和任何其他有用的标记（如标题、强调、强调等）来标记演讲和描述。我喜欢使用视频上方的链接来显示/隐藏成绩单，因此在用户决定要阅读之前它不会占用页面太多空间。这个可访问的媒体播放器资源列表应该会给你一些很好的例子。

于 2016-10-07T07:24:03.803 回答
2

WCAG 为成功标准 1.2.2 提供了两种技术 - 字幕（预录）

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

如果您的视频是“文本的媒体替代品”，您必须清楚地标明它。问题是“使用 aria-labelledby 为非文本内容提供文本替代”缺乏浏览器支持，但您仍然可以使用它。我的意见是成绩单应该用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="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 技术）元素的主体，因为现代屏幕阅读器不支持使用小程序进行导航

于 2016-10-07T08:27:20.497 回答