WCAG 2.0 – Closed Caption, Describe Video and Transcripts

Adding (or burning) captions into raw videos will not satisfy WCAG 2.0 criteria because the text then becomes part of the image which will not be narrated by screen readers or displayed on braille device. Real Closed Caption (CC) / Describe video is actually text overlaying the video for those who are visually impaired.

Moodle does not currently offer a way to include subtitles for a video. The standard compliant and best practice approach to inserting video captions requires using the HTML5 <track> element. The various attributes of the is element allow you to specify the type of content, the language it is in and a reference to text file that contain the actual information. A good file format to use for this is Web Video Text Tracks (WebVTT). SubRip Text (SRT) format files would need to be converted to WebVTT using a tool like srt2vtt. You could even specify the .VTT file for several languages all in one shot. I believe that there is even an inline technique so that you don't need to upload a separate file but I would need to double check that.

How do you create the WebVTT file in the first place? You could code it all by hand but this would be quite tedious. An easier approach would be to use an online tool like Subtitle Horse or Subtitle Edit for Windows.

While not a problem in most LMS' and CMS' like WordPress, there is currently no way to include CC with videos in Moodle yet. The alternative is to include a transcript of the video.

Normally you should put this first on your page but that would push the video way down. People may not even realize that there is a video until they are almost finished reading the text. In most LMS' that don't use YUI, this would be a simple matter of placing a link above the video pointing to the transcript, followed by the video and finally the transcript which could even be collapsed (activated by the link of course). This would require adding an id attribute to an HTML tag. Unfortunately all tags in Moodle get an id, automatically generated by YUI. This leaves you with no way to create in-page links. You could create the link but the id in <h3 id="your_id">Transcript</h3> would be overwritten by Moodle's YUI.

How do you get around this? I created a small piece of JavaScript code that you can add to Moodle. This JavaScript returns to you the power of creating in-page links that work in a similar way to the way native HTML works except that you can link to tags with classes instead of tags with ID's. You'll find my scroll-to-class-id-using-jquery-for-yui snippet (gist) on GitHub. It includes instructions on how to use it. For a smooth effect, you can combine this with my Smooth scrolling for in-page links snippet.

This technique could also address accessibility issues with audio files.

More Information -- WCAG 2.0 Techiques

I know it sounds complicated and maybe even overwhelming but, once you decide on an approach that meets the intent of the WCAG 2.0 principle and guideline, it will become a lot easier.

Hope this helps. Let me know if you want an explanation of the difference between Closed Caption and Describe Video.

Michael Milette


Leave a Reply

Your email address will not be published. Required fields are marked *