Video Accessibility

Instructions and Materials for Hands-on Workshop

Part 1: Captions

1. Right click the following link to download the sample video: deadline.mp4.
2. Save it to the class folder (Video Workshop) on your desktop.
3. Login to your YouTube account.
4. Upload video to YouTube (click "Create a video or post", select "Upload video", navigate to deadline.mp4)
5. Set privacy to "unlisted"
6. Caption it!
   • If using YouTube Studio Beta:
     1. Select Transcripts from the menu
     2. Select the video you want to caption
     3. Click the Add Language button (top right), then select a language.
     4. The new language will be added to the table of subtitles. Click the "Add" link in the Subtitles column.
     5. This will take you to the caption/subtitle editor.
     6. Select either "Transcribe and auto-sync" or "Create new subtitles or CC" and follow the prompts.
   • If using YouTube Creator Studio Classic:
     1. Select Videos from the menu
     2. Find the video you want to caption, then click the Edit button and select "Subtitles/CC"
     3. This will take you to the caption/subtitle editor.
     4. Click the Add new subtitles or CC button (top right), then select "English".
     5. Select either "Transcribe and auto-sync" or "Create new subtitles or CC" and follow the prompts.
7. Use the Actions button within the caption/subtitle editor to Download the caption file in .vtt format.
8. Save the file to the class folder (Video Workshop) on your desktop, and name it deadline_captions.vtt.
9. Review the caption file in Notepad++ (or Notepad, or any other text editor).

Captioning Tips

• Keep caption length short (42 characters max, but less is better).
• Use 1 or 2 lines per caption.
• Try to keep ideas together.
• Identify changes in speaker using parentheses.
  Example: (Boy) Maybe later
• Identify critical sounds in square brackets
  [ a knock at the door ]
• For other tips, consult the DCMP Captioning Key (use the "hamburger menu" - top center - to navigate).

Notepad++ Tips

• You can change the default theme by going to Settings > Style Configurator.
• You can enable word wrap via View > Word Wrap.

Part 2: Audio Description

1. Copy deadline_captions.vtt to deadline_descriptions.vtt.
2. In Notepad++ (or any text editor), open the copied file and edit it to add audio description.
3. Watch the video and record any critical visual information that isn't accessible via the audio track.
4. Chose start times carefully. Try to insert descriptions during moments when there is no dialog or other critical audio.
5. Use the start time from the media player.
6. The end time is arbitrary, but must be after the current start time and before the next start time.
7. For other tips, consult the DCMP Description Key (use the "hamburger menu" - top center - to navigate).
8. Save the file when finished.

Part 2b: Chapters

1. Copy either of the VTT files created so far to deadline_chapters.vtt.
2. In Notepad++ (or any text editor), open the copied file and edit it to add chapters.
3. Decide how best to organize the video content (what are the key landmarks?). Each key landmark should be a new chapter.
4. For each chapter, record the start and end times from the media player.

Part 3: Putting it All Together

1. Download latest version of Able Player (use the "Source code (zip)" link).
2. Save it to the class folder (Video Workshop) on your desktop
3. Unzip it. When doing so, select C:\xampp\htdocs\video\ as the destination folder.
4. This will add a new folder named ableplayer-3.21. Rename it to ableplayer.
5. Right click and download the file videos.html to your class folder.
6. Open videos.html in Notepad++.
7. At the same time, open videos.html in your web browser using the following link: localhost/video/videos.html
8. Copy and paste the link into multiple browsers for testing.
9. In Notepad++, add video to each of the three sections of the page (see below for detailed instructions).
10. Each time you add a video, save the file. Then go to the web page in the browser(s) and refresh the page to see your changes. Test the video with and without a mouse to see if it works.

Example Video #1: Default Browser Video

Add the following code to this section in your web page:

  <video id="video1" preload="auto" width="500" height="281" controls>
    <source type="video/mp4" src="deadline.mp4">
    <track kind="captions" src="deadline_captions.vtt" srclang="en" label="English">
    <track kind="descriptions" src="deadline_descriptions.vtt" srclang="en">
    <track kind="chapters" src="deadline_chapters.vtt" srclang="en">
  </video>

Example Video #2: YouTube Video

1. Go to the video you uploaded on YouTube.
2. Watch the video. Beneath the video player, click the Share button.
3. In the dialog that pops up, under the "Share a Link" heading, click the Embed button.
4. Copy the embed code that appears, then paste it into your web page.

Example Video #3: Able Player Video

1. Copy the code from Example Video #1, and paste it into the Able Player Video section.
2. Delete the controls attribute from the <video> tag.
3. Add the data-able-player attribute to the <video> tag.
4. Test it with NVDA in either Firefox or Chrome (see below for tips)
5. After testing with NVDA, add the following attribute to the <source> tag:
   data-desc-src="ableplayer/media/deadline_desc.mp4"
6. Now test it again, with Descriptions on.

Tips for testing with NVDA

• Use the "h" key to navigate between headings.
• Use the tab key to navigate between buttons and controls.
• Use the arrow keys to control sliders.
• Use the enter key to activate buttons.

Links to Resources

UW Resources and Tools

• UW Accessible Technology
• Creating Accessible Video
• DO-IT Videos
• Able Player
• YouTube Caption Auditor (YTCA)

Other Resources

• DCMP Captioning Key
• DCMP Description Key

Free Captioning (and Description) Tools

• Amara.org
• DotSub.com
• CADET

PowerPoint slides from Workshop

• Part 1
• Part 2

Videos Shown in Workshop

• #BestOfUW 2016 (on President's Blog)
• IT Accessibility: What Campus Leaders Have to Say