Multimedia Tips (graphics, photos and videos)

Closed Caption and Describe Video are two types of text that you can add to a video to help people who can't see or hear what many of us take for granted: Pictures (video) and Sound (audio). 

Closed caption is text that is presented in synchronization with a video and is typically a word-for-word transcript of what people normally hear. It usually includes words but may also include (but not limited to) a description of sounds like thunder, clapping and music. 

Describe video, is similar, except that it is a transcript of what is happening in the video. This is especially important when you are demonstrating something in the video but not describing actions as they happen. Depending on the situation, these can be combined.

Adding (or burning) these captions into raw videos will not satisfy WCAG 2.0 (Web Content Accessibility Guidelines) 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.

The standards 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.

Since Moodle 3.2, you can add VTT caption files right from within the Atto Editor. A best practice is to also include a transcript of the video. Normally you should have this text appear first on your page, before the video, because that is the accessible format however 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 which is automatically generated by YUI leaving you with no way to create in-page links. I mean 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 would also apply to addressing accessibility issues with audio files.

More Information - WCAG 2.0 Techiques

• H95: Using the track element to provide captions
• G58: Placing a link to the alternative for time-based media immediately next to the non-text content
• G69: Providing an alternative for time based media
• G87: Providing closed captions
• G151: Providing a link to a text transcript of a prepared statement or script if the script is followed
• G158: Providing an alternative for time-based media for audio-only content
• G159: Providing an alternative for time-based media for video-only content

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