Html 要完成WCAG 2.0，视频的转录本应该如何可见？

我正在建立一个网站，必须实现AA符合WCAG

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

---

谢谢你抽出时间

理想情况下，成绩单应该放在视频之前。没有专门针对成绩单的标记-您需要使用段落标记和任何其他有用的标记（如标题、强项、强调、，等等。我喜欢使用视频上方的链接来显示/隐藏成绩单，这样在用户决定阅读之前不会占用页面太多空间。这应该给你一些很好的例子。

理想情况下，成绩单应该放在视频之前。没有专门针对成绩单的标记-您需要使用段落标记和任何其他有用的标记（如标题、强项、强调、，等等。我喜欢使用视频上方的链接来显示/隐藏成绩单，这样在用户决定阅读之前不会占用页面太多空间。这将给您提供一些很好的示例。

WCAG提供了两种用于

处理这两种情况的最佳方法是使用HTML5

标记来指定标题

如果你的视频是一个视频，你必须清楚地标明它是这样的。问题是“”缺少浏览器支持，但您仍然可以使用它。我的意见是，成绩单应该由

描述的
唱段链接。但是，对于不使用屏幕阅读器的用户，您必须明确（并且可见）文本的作用。在读了一段文字并意识到文字就是它的转录本之后开始看视频总是令人讨厌的

我想说的是，最好是使用以下内容（使用
track
作为闭路字幕和/或在视频前明确宣布并在视频后显示的成绩单）：

我的视频的标题（）
视频记录：
这里是成绩单

注意：您不应该使用
对象
（）元素的主体，因为现代屏幕阅读器不支持这一点，因为它可以处理小程序导航WCAG为





处理这两种情况的最佳方法是使用HTML5
标记来指定标题

如果你的视频是一个视频，你必须清楚地标明它是这样的。问题是“”缺少浏览器支持，但您仍然可以使用它。我的意见是，成绩单应该由
描述的
唱段链接。但是，对于不使用屏幕阅读器的用户，您必须明确（并且可见）文本的作用。在读了一段文字并意识到文字就是它的转录本之后开始看视频总是令人讨厌的

我想说的是，最好是使用以下内容（使用
track
作为闭路字幕和/或在视频前明确宣布并在视频后显示的成绩单）：

我的视频的标题（）
视频记录：
这里是成绩单

注意：您不应该使用
对象
（）元素的主体，因为现代屏幕阅读器不支持这一点，因为它可以通过小程序进行导航
谢谢大家的帮助！
我做了研究，最终的答案是匹配正确的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>


谢谢你们的帮助，伙计们！
我做了研究，最终的答案是匹配正确的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>


谢谢stringy！你的链接帮了我很多！详细信息和摘要标记虽然不是用于此目的，但实际上可能是最好的，因为它们允许您在不使用javascript的情况下创建WindowsShade转录切换。谢谢stringy！你的链接帮了我很多！详细信息和摘要标记虽然不是用于此目的，但实际上可能是最好的，因为它们允许您在不使用javascript的情况下创建windowshade转录切换。