Accessible Video

WCAG Requirements

Our website must meet the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA in order to give all users the same experience, regardless of how they access the media and regardless of any visual, hearing, cognitive, or mobility differences.This means providing visual or audio content in multiple formats.

At the time of writing, social media is not covered under WCAG. However, if social posts or YouTube videos are embedded in the website, they must be compliant.

Communications Requirements for Time-Based Media

NB: If you record live media and then post it later, the media is then newly classified as “pre-recorded” and must meet those additional requirements.

*Additional audio description is required only if video audio does not sufficiently describe visual elements

Visual Design Requirements for Video

• Always have accompanying text labels for icons
• Do not use colour alone to distinguish information
• Use colour, pattern, and shape together to convey information
• Text and background must have a colour contrast ratio of at least 4.5:1
• Large text (18pt, bold) must have a colour contrast ratio of 3:1
• Text that’s part of a logo or brand name has no contrast requirement
• Content must not flash more than three times a second

Script

Setting up the script correctly will prevent extra work in the future. One easy way to do this is to ensure all visual information is spoken out loud from the beginning:

• Avoid directional language for important information, e.g. avoid “in the description below” or “click the menu to the left”
• Have speakers say their name, title, and location, e.g. “Hi, I’m SA President Mary Poppins talking to you from the Observatory”
• Say all on-screen text out loud, e.g. explain all graphics, charts, important imagery
• For live media, repeat potentially inaudible audience questions back, and say the results out loud if you do an audience show-of-hands, e.g. “about half of the audience raised their hands”
• Write the script using the captions file format from the start to avoid reworking it later

Audio Description

Audio description is a separate audio track describing any visual information that can’t be understood from the existing audio, e.g. speaker names and titles, descriptions of actions, scene changes, on-screen text.

The track is either attached to the original video so users can choose which audio track they’d like to use, or a second version of the video is created and linked to in the original video’s description.

Additional audio description needs to be provided when a pre-recorded video does not have any audio, OR the existing audio isn’t descriptive enough.

Captions

Captions include both the dialogue and other audio needed to understand the content, e.g. sound effects, music, laughter, speaker identification, location.

They are time-coded and synchronized with the audio of a video. Both open and closed captions are accepted.

Captions are created in a text editor like Notepad (Windows) or TextEdit (Mac) and are saved as either a .txt or .srt file.

Open Captions Design Requirements

• Limit captions to 32 characters, with 2 lines per caption
• Captions should no obstruct relevant information in the video
• Minimum font size is 10pt
• Text and background must have a colour contrast ratio of at least 4.5:1

Writing Requirements

• Watch the final video and edit the script to match the speakers verbatim
• You cannot change any dialogue, e.g. include any “ums”, do not correct grammar
• Use speaker’s full name on the first appearance, then use only their first name for subsequent appearances (where appropriate). Do not include their title.

General Formatting for Captions (TXT and SRT)

• Speaker names are in all-caps followed by a colon:

  JEN:

• Two arrows indicate a new speaker is talking:

  >> JEN:

• Important information that is in the audio, but is not dialogue (i.e. sound effects) goes in square brackets

  [upbeat music][clapping][audience laughter]

• Indicate if speech is inaudible:

  [inaudible]

• Express the feeling, e.g. [rock music] is more descriptive than [music]
• Separate each new caption with a blank line
• If there is a break in dialogue, but the speaker does not change, simply continue the caption without identifying the speaker:

  >> JEN: Hello birds!
  
  [birds chirping]
  
  It's nice to see you today!
  

Example TXT file format

Captions using the TXT file format do not have timecodes since YouTube will automatically place captions at the correct time.

>> ALICE MILLER: Hi, my name is Alice Miller and this is John Brown.
 
>> JOHN BROWN: and we're the owners of Miller Bakery.
 
>> ALICE: Today we'll be teaching you how to make
our famous chocolate chip cookies!
 
[intro music]
 
Okay, so we have all the ingredients laid out here

Creating and Saving Captions on Zoom

Turn on Closed Captions

• In a Zoom meeting or webinar you’re hosting, select Live Transcript
• Option 1 (Preferred): Enable Auto-Transcription
• Option 2: Allow a third-party app to transcribe
• Option 3: Assign a person to write out captions live
• Participants now have the option to view captions and live transcript

Save Closed Captions and Transcript

• Let participants know you’re recording the meeting
• Turn on Closed Captions
• Click Record > Record to the Cloud
• Host receive an email after the meeting, once the transcript is processed
• Review captions file before posting

Participant

• If the host has enabled them, you’ll see a notification above Closed Caption/Live Transcript in the meeting controls
• To see subtitles, click Live Transcript > Show Subtitle
• To see the transcript, click Live Transcript > View Full Transcript
• You can click and drag the subtitles to reposition them

Transcripts

A transcript is an HTML document that describes both the audio and visual information from a corresponding video. The transcript tells the same story and presents the same information as the video, so users have the same experience regardless of the medium.

Transcripts contain descriptions for the content, including speech, location, scenery, actions, expressions, animations, text, graphics, music, speaker names and titles, sound effects. They do not include timestamps.

A link to the transcript should be included with every video posted to the website.

Download Transcript Template File (.docx)

Writing Transcripts

• Watch the video with the captions file in front of you and add in any missing information
• Write the transcript in a word processor, then open the template file in a free code editor like Brackets or Sublime Text to format it properly
• You cannot change any dialogue, e.g. include any “ums”, do not correct grammar
• Information that is not part of the audio can be put inside [square brackets], e.g. titles, headings, actions
• Information that is in the audio, but is not dialogue goes in ( parentheses with a space ), e.g. music, sound effects, clapping, laughter
• Indicate tone, e.g. Joe: I hate this computer! [shouted], but it’s funny [laughing]
• Indicate pauses, e.g. Mike: Let me think. [pause] It’s going to rain.
• Use both the speaker’s full name and title for the first appearance, then their full name for formal videos, or their first name for informal videos
• Indicate if speech is inaudible, e.g. Audience: [inaudible]
• Headings and hyperlinks can make a transcript more usable, while boosting SEO

Transcript as HTML

<h1>How to Make Chocolate Chip Cookies</h1>  
Video URL: <a href="https://youtube.com/kldjglkfjg">https://youtube.com/kldjglkfjg </a>

<hr>
 
<h2>Transcript</h2>

<p>
[Miller Bakery Logo]
</p>

<p>
[Make Chocolate Chip Cookies with the Millers]
</p>

<strong>ALICE MILLER, OWNER MILLER BAKERY:</strong> 
<p>
Hi, my name is Alice Miller and this is John Brown.
</p> 
 
<strong>JOHN BROWN, OWNER MILLER BAKERY:</strong> 
<p>
 and we're the owners of Miller Bakery. [waving]
</p> 
 
<strong>ALICE:</strong> 
<p>
Today we'll be teaching you how to make
our famous chocolate chip cookies!
</p> 
 
( intro music )

<p>
Okay, so we have all the ingredients laid out here
</p>