Web accessibility is an important part of the development process that should be considered with your initial course design. It is a “best practice” for your e-Learning presentations to be compliant with Section 508 of the Rehabilitation Act. As described in the 508 Standards Guide [1194.22(b)]:

“Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.”

Lectora® and Lectora® Online make it easier to comply with Section 508 requirements as well as conform to Level AA of the Web Content Accessibility Guidelines 2.0 by including closed captions within your titles.

This article will show you step by step how to create and add closed captions to Lectora and Lectora Online titles. For more information, visit the Lectora and Lectora Online Help for topics on Working with closed-captioning audio objects and Working with closed-captioning video objects.

Part I: How to Add Closed Captions to Video Files

Step A: Insert Your Video File into Lectora and Lectora Online

Open your title in Lectora or Lectora Online. Locate and drag the desired video file into your title, or alternatively, from the Insert ribbon, select Video File. Browse for and select the desired video file.

Lectora and Lectora Online support adding captions to MP4 video formats. If your file is not in this format (for example, WMV or AVI), you will need to convert it to MP4. You can convert it as you import it. Double-click on the video on the page (or in the Title Explorer) to switch to the Properties ribbon for the video object. Click Convert to MP4.

Step B: Create Your Caption File

Adding captions requires a specially formatted caption file in order to attach captions. You can select from three supported formats for the captioning file:

• Web Video Text Tracks (WebVTT) – Captioning format for HTML media players (Recommended)
  Note: For full Firefox support with WebVTT, on the Web server where the title resides, set a mime type definition for VTT to AddType text/vtt .vtt
• SubRip Subtitle (SRT) – Popular standard used for YouTube and Facebook captioning
• eXtensible Markup Language (XML) – Captioning format for Flash video

Additionally, you can customize the caption styling, including the font and font highlighting. The following font properties can be configured within the closed-captioning file:

Follow these rules when creating the captioning file:

• Specify the start and end times for each caption set. Time is in the format: hours:minutes:seconds:hundredths (HH:MM:SS:hhh)
• Specify the text for each caption set. Text can appear on multiple lines, if desired.
• Optionally, customize the font styling using a <span> tag.
• Save the file as a plain text file with the desired name and change the file extension to the appropriate captioning file format (.vtt, .srt, or .xml).
  Note: For WebVTT, make sure there is a blank line between the heading and the caption details.

There are a couple of different ways to create your caption file. You can easily create it yourself, or use a 3rd party service (such as 3PlayMedia). To create a caption file, click Add Captions on the Properties ribbon for the video.

On the Add Captions dialog, click one of the Sample caption buttons to see a sample captioning file:

Examples

• WebVTT (Recommended)

  00:00:00.000 --> 00:00:00.000
  <span style="text-align:center"></span>
  00:00:08.000 --> 00:00:10.000
  VTT Format: This line should appear at 8 seconds
  00:00:10.500 --> 00:00:12.500
  These two lines should
  appear at 10.5 seconds
  00:00:17.000 --> 00:00:20.000
  These two lines should appear
  with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!

• SRT

  00:00:00.000 --> 00:00:00.000
  <span style="text-align:center"></span>
  1 
  00:00:08.000 --> 00:00:10.000 
  SRT Format: This line should appear at 8 seconds
  2 
  00:00:10.500 --> 00:00:12.500 
  These two lines should 
  appear at 10.5 seconds 
  3 
  00:00:17.000 --> 00:00:20.000 
  These two lines should appear 
  with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!
  

• XML

  <?xml version="1.0" encoding="UTF-8"?>
  <tt xmlns="http://www.w3.org/2006/10/ttaf1">
    <div>
      <p begin="00:00:00" end="00:00:00">
      <span style="text-align:center"></span>
      <p begin="00:00:08" end="00:00:10">
        XML Format: This line should appear at 8 seconds
      </p>
      <p begin="00:00:10.5" end="00:00:12.5">
        These two lines should
        appear at 10.5 seconds
      </p>
      <p begin="00:00:17" end="00:00:20">
        These two lines should appear
        with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!
      </p>
    </div>
  </tt>

The sample files have all of the required formatting contained within it. You simply need to change the text of the captions, and set the timings of when your text will appear and disappear. The samples each contain three parts: Header information, Text Styling information and the Body (caption text). Let’s examine the XML sample and take a closer look at each part:

1. Header information: This section provides some general information to Lectora and Lectora Online about the file. There is nothing you need to change here.

2.   Text Styling: This sample is set up to allow for two different styles for text: “normal” and “warning”.

“Normal” is set to a font size of 15 pt, and the default closed caption color of white, while “Warning” text will display in red, bold, and 20 pt. You can leave these as is, or change them as you wish. (Note: colors are set using HEX values. Here is a handy color chart.)

As you will see below, for each line of text in your caption you can determine whether to use the “normal” style or use the “warning” style. (Or define your own style by copying the “warning” line and renaming the style id.)

3.  Body (caption text): This is where you enter the specific text and timing for your video file.

3a. Each paragraph of text that you want to appear starts with the tag of <p begin= and ends with </p>. You simply copy/paste to repeat this information as many times as needed for all of the text in your file.

3b. For each paragraph, start by setting the timing of when you want this text to appear (begin=) and disappear (end=). The format is HH:MM:SS – Hours:Minutes:Seconds. You can also indicate tenths and hundredths of seconds, if needed.

3c. Next, identify which of your defined text styles each paragraph should use. Simply change the style= value to the desired style id.

3d. Finally, add any special formatting such as line breaks <br/> (to force multiple lines in this caption) or perhaps apply a text style to span a specific word or phrase within a caption.

In the sample above, you can see there will be a line break after the word “line”, and the number “17” will appear in the “warning” (red, bold) text style:

Step C: Save Your Caption File and Add It to Your Video

When you have finished making all of your edits to create your caption file from the sample, remember to save it! Using Lectora Desktop, select File > Save As and name the file appropriately. Change the file extension to XML. Using Lectora Online, click Save To Title.

Next, select the caption file. On the Video Properties ribbon select Add Captions. Browse for and select the caption file that you created.

Step D: Preview & Publish Your Video with Captions

Enter Run or Preview mode. Play your video and make sure that the closed captions appear.

Part II: How to Add Closed Captions to Audio Files

Lectora and Lectora Online support adding closed captions to MP3 audio files using the same steps as for video above: insert the audio file, and then on the Properties ribbon for the audio object select Add Captions.

Again, you may need to use Convert to MP3 to change your audio file format (for example, from WAV or WMA).

Step B: Preview & Publish Your Recording with Captions

Resize your audio object on the page to ensure it is tall enough to view the closed captions.

Enter Run or Preview mode. Play your recording and make sure that the closed captions appear.