3

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.

Nestor
  • 664
  • 11
  • 25

3 Answers3

3

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>
Nestor
  • 664
  • 11
  • 25
2

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.

stringy
  • 1,323
  • 7
  • 16
  • Thanks stringy! your link help me a lot! – Nestor Oct 10 '16 at 22:28
  • The details and summary tags, though not intended for this purpose, are actually probably the best for this, because they allow you to create a windowshade transcription toggle without javascript. – kloddant Sep 28 '20 at 22:04
  • As of 2019, there is a W3C draft of a [transcript extension for HTML](http://w3c.github.io/html-transcript/html-transcript-src.html), proposing a `` HTML element. – fbmd Jun 17 '21 at 19:49
2

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

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

Adam
  • 17,838
  • 32
  • 54