如何实现符合 WCAG 2.0 标准的视频字幕呈现方式？

Question

我正在建设一个需要实现符合WCAG AA遵从性的网站。

我们将提供视频，为了做得正确，必须有这个视频的文本转录。我的问题是，在html中，放置此转录的正确顺序是在之前还是之后？是否有有效的标签来满足这一要求。

感谢您的时间。

- Nestor

Answer 1

感谢大家的帮助！ 我进行了研究，最终答案是匹配正确的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>

- Nestor

---

答案的依据是什么来源？ - fbmd

Answer 2

理想情况下，字幕应该放在视频之前。没有专门用于字幕的标签 - 您需要使用段落标记和任何其他有用的标记（如标题、强调等）来标记语音和描述。我喜欢在视频上方使用一个链接来显示/隐藏字幕，这样它不会在用户决定阅读之前占用太多页面空间。这个无障碍媒体播放器资源列表应该为您提供一些很好的例子。

- stringy

---

谢谢Stringy！你的链接帮了我很多忙！ - Nestor

详细信息和摘要标签虽然不是为此目的而设计的，但实际上可能是最好的选择，因为它们允许您创建一个无需 JavaScript 的窗帘转录切换。 - kloddant

截至2019年，W3C有一份HTML的副本扩展草案，提议增加一个<transcript> HTML元素。 - fbmd

Answer 3

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

• G93：提供开放式（始终可见）字幕

• G87：在视频内提供闭合字幕

处理这两种情况的最佳方式是使用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 technique），因为现代屏幕阅读器不支持此功能，可以使用小程序进行导航。

- Adam