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

问题

I'm building a website that has to achieve the AA Conformance to WCAG.

We are going to provide videos and to do it right there has to be a transcript of this video, my question is, in html were is the correct order to put this transcript before, after. there is a valid tag to comply this.

Thanks for your time.

回答1:

Ideally, the transcript should be placed before the video. There is no tag specifically for transcripts - you will need to mark up the speech and descriptions using paragraph tags and any other useful markup like headings, strong, emphasis, etc. I like to use a link just above the video to show/hide the transcript so it doesn't take up too much room on the page until the user decides they want to read it. This list of accessible media player resources should give you some good examples.

回答2:

Thanks for your help guys! I did my research and the final answer was matching the correct aria attributes and some 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>

回答3:

WCAG provides two techniques for Success Criterion 1.2.2 - Captions (Prerecorded)

• G93: Providing open (always visible) captions

• G87: Providing closed captions inside the video

The best way to handle both situation is to use the HTML5 <track> tag to specify the captions.

If your video is a "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" lacks of browser support, but you still can use it. My opinion is that transcript should be linked by a aria-describedby. But still, for users not using a screenreader, you have to make it clear (and visible) the role of text. It's always annoying to start watching a video after reading a text and realizing that the text was its transcript.

I would say that the best is to use something like the following (using track for closed captions and/or a transcript clearly announced before the video and indicated as such after) :

  <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>

Note: You should not use the body of the object (H53 technique) element as this is not supported by modern screen readers which can handle navigation with applets

来源：https://stackoverflow.com/questions/39909920/how-the-transcript-of-a-video-should-be-visible-to-accomplish-wcag-2-0