Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 357
Nestor Avatar asked Nov 01 '25 17:11

Nestor


1 Answers

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>
like image 136
Nestor Avatar answered Nov 03 '25 09:11

Nestor



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!