Creating Accessible Videos for Websites

Creating Accessible Video for the Internet

Marsha Schwanke Burton Blatt Institute (BBI) Syracuse University September 8, 2010 In This Session

¾ Why Accessible Video? ¾ Features of Accessible Online Video ¾ Tools for Accessible Video ¾ Tips to Plan & Develop Accessible Video ¾ Examples/Best Practices ¾ Resources ¾ Q&A

z 82% – Internet users that view videos online. z 182 – Online videos avg. user watches in 1 month. z 10x longer - Websites with video hold attention. z 2 billion – Videos served by YouTube in 1 day. z 81.9% – Embedded YouTube videos on blogs. z 90% - Est. Internet content video-based by 2012

3 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Why Accessible Video? z Universal Design to Maximize Use z Individuals who are Deaf/HOH z Language & literacy: communication, learning

z Environment flexibility: noisy, quiet, shared z Multi-modes: cognitive disabilities, learning styles z Technology compatibility & access z Searchable Content z Right Thing to Do … Good Business z Compliance: Policy, Standards, Laws (State, Federal, International)

4 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video: Sample Compliance - 508, WCAG

z Section 508(a)~WCAG 1 (1.1)~WCAG 2 (1.1,1.2,4.2) z Text alternatives for all non-text content

z Section 508(b)~WCAG 1 (1.4)~WCAG 2 (1.2) z Synch alternatives for multimedia

z Section 508(m)~WCAG 1 (6.3,6.4,8.1)~WCAG 2 (2.1,4.1,4.2) z Link to applet or required plug-in z Directly accessible or compatible with AT (i.e. keyboard, screen reader, magnifier, etc.)

5 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video: Color z Information cannot be conveyed by color alone z Sufficient contrast between background and content z Brightness Difference (should be >= 125) z Color Difference (should be >= 500)

z WCAG 2.0 Level AA / 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 5:1 (with some exceptions). z Tools: z Online Color Evaluation Tool z Colour Contrast Analyser Firefox Extension z Contrast Analyser

6 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video: Quick Evaluation z Ask yourself – if I can't see or hear the media? z Captions provided and synched? z Transcript provided? z Link to download plug-in? z Controls keyboard accessible? z Can screenreader access the controls? z Sufficient contrast between background and content? z Webpage validate? z Other: z Sign Language Interpretation; Reading Level; Visual Presentation; Abbreviations

7 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video: Key Features z Video or audio file z Transcript z Captions z Media Player z Audio Description

8 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 2: Transcript z Key starting point of accessible video z Plain text file (.txt) needed for audio or video file z Make link to access before or after media z Publish as a text file and/or webpage z Sources of Transcript z Capture from production z Typed by hand z Voice recognition / speech-to-text software

z Text of the spoken word z Synchronized z Accessible z Equivalent

z Includes non-speech audible information z Sound effects, music, laughter, speaker id

z Different than “subtitles” (translation)

z Open captioning (OC) z Always visible - “Burned-in”

z Closed captioning (CC) z Turn on/off z Controls for captions in device; some customizable

z Real-Time captioning z Live “synched” delivery of dialogue & audio to text z Runs parallel or via separate application

11 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Audio Description AKA Descriptive Video

z Audio description of key visual elements z Helps individuals who are blind, low vision, or anyone unable to see video. z i.e., Actions, costumes, gestures, scene changes

z Separate audio track synched with video & within natural pauses

z How To: z Incorporate in pre-production when scripting video. z Review standard techniques in audio description.

12 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Examples: Audio Description z Audio Description Example (MP3) from WebAIM http://webaim.org/techniques/captions/media/audiodesc.mp3 z Lion King (audio description demo) http://ncamftp.wgbh.org/lionking/lionking_hi.mov z Assistive Technology Boogie http://inclusive.com/AT_boogie/at30.swf

z YouTube Player z Windows Media Player

z QuickTime Player z VideoLAN VLC Media Player z Real Player

z Flash z JW Player z ccPlayer

z Mobile & Apple devices, iTunes

14 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video Players (Free)

z Accessible YouTube Player Controls z Some developer knowledge required z Code and instructions by OSU Web Accessibility Center z JW Player z Flash only; supports captions & audio descriptions z VideoLAN-VLC Media Player z Supports captions & audio descriptions z ccPlayer z Flash only; developer knowledge helpful but not necessary

15 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Planning for Accessible Video

1. What You Need z Video or audio file z Transcript of audio portion of video z Captioning tool or service

2. Develop Plan for Creating Captions z Delivery of media z Outline workflow z Keep in mind: time, $$, resources z Research issues, standards, tools & services

16 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Planning for Accessible Video: Delivery of Media z When plan video: Determine audience, Internet connectivity method, format z Issues: Download time, storage capacity, media players use different formats z Types: z Streaming media (aka VOD) z Live or archived content delivered almost real-time to viewer z Experience as download; generally not stored on viewer’s system z Preferable: large files, can jump forward/back in content

z Progressive downloads z Files downloaded to viewer’s computer z Not have to be completely downloaded before viewing begins z Final result is copy of video exists on viewer’s computer z Not desirable: copyright, larger videos, smaller bandwidth versions

17 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Planning for Accessible Video: Workflow and Time z Workflow (and Impact of Issues) z Staff support: Collaboration of content producers and distributors z Production ease and flexibility to: z Rapidly changing formats, playback & distribution devices z Popularity & availability of video sources z Time z Detailed work, review for accuracy & grammar z Must understand non-spoken info & how to convey in captions z Transcription most time consuming z Total Time: 5-10x length of the video 5 min video – 25 min to 1 hour 15 min video – 1.25-2.5 hours 1 hour video – 15-20 hours 50 videos @ 10 min – 40-80 hrs

18 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Captioning Tools & Services z Types: DIY, Web/software, Third party z DIY Considerations z Time (5-10 hrs. of work per video hr.) z Training, learning curve, & support z How much video and room for growth z Staff or students and turnover z Cost z Space, equipment, training, hiring, tech support, mgmt

19 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved DIY Captioning Tools z Free z MAGpie z World Caption z Purchase z Hi-Caption z Softel Swift z MovCaptioner z Adobe Captivate z CaptionKeeper z Flash z Subtitle Workshop

DIY Tools: z MAGpie z QuickTime Pro z Adobe Premiere / Audition z Apple iMovie / GarageBand

Hire Third Party/Service Providers z Media Access Group (MAG) at WGBH

21 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Captioning Considerations Web/software & Third-Party z Research & consider: $, service, & support z What media formats - requires actual media in hand? z Scope & growth to need & technology? z Budget – balance $ and time z What type of caption data files z Accuracy not perfect - still requires review z Cut down on people time / save $$ – or not? z Integrated systems capture & captioning z Echo360 z Panoptos CourseCast z Adobe Acrobat Connect

22 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Third Party Captioning Providers

z Search for Providers by Location, Service z Closed Captioning Web – www.captions.org/services.cfm

z AST – Automatic Sync Technologies z WGBH Media Access Group z Caption Colorado z WebWideVideo.com z Winged Words Transcription Services z Talking Type Captions z CaptionMax z Omega Transcripts z VITAC z SubPLY

23 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Planning for Captioning Example z Stanford Captioning Project (captioning.stanford.edu/service.php)

z Identified Problems, Solutions, & Timeline z Converting various media to web-ready format that works with accessible web-based players z Text transcript from audio of media z Synch text transcript with media

z Project: z Docsoft:AV Captioning Solution (http://docsoft.com/) Tools leverage software with blend of server and desktop applications to quickly and easily produce captioning for digital audio and video content

1. Video or audio file 2. Transcript 3. Caption Display: segment & timecode 4. Create caption files 5. Combine caption file with video 6. Publish & distribute captioned media

25 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 1: Video or Audio File - Media Players

Microsoft Windows Media Player VideoLAN VLC z .wmv, .avi Video File Media Player z .wma Audio File z swf., .flv Video File z mp3, .m4p Audio File Apple QuickTime and iTunes z .mov, .qt Video File z .m4p Audio File z Cross-platform media player z Only player that can display both closed captions and Real Network Real Player closed audio description z .rm Video File z Keyboard controls z .ra, .ram Audio File z Screen reader: z Labeled buttons Adobe Flash Player z Hidden player controls z .swf., .flv Video File z .mp3 Audio File

26 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 1: Basic Script & Production Tips for Accessibility z Producing Programs and Videos for Viewers with Vision Impairment (MAG Guide #2) z Accessible Digital Media Guidelines z Do It Yourself Video Guide for Government Agencies (PDF)

27 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 2: Transcript – Content z Transcribe spoken words and describe other aspects that convey information onscreen and offscreen z Narration, dialogue, sound effects, pick-up cues z Type contractions as spoken (I’ll vs. I will) z Follow standard capitalization & punctuation z Do not spell out numbers z At End: any captioning credits and identify “end of transcript”

28 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 2: Transcript – Content z Sentence Size z Depends on space for captions and font size z Keep in proportion and display 1-2 sentences z Accurately represent each speaker’s words, conversational quality, and speech patterns. z Change as little as possible – keep original language z Word for word, except fillers (i.e. um, huh) z Use correct (not phonetic) spelling z Do not change sentence structure and grammar (even mispronounce) z No “water-down” or rewrite, except require for presentation rate z Easy to read & consistent – and spellcheck

29 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 2: Transcript - Conventions z Speaker: Name followed by a colon, >>, or >>> z Titles and Reading aloud: italics z Audible breath: hhh z Unclear audio: , z Singing: where possible, surround with musical note icon

[Bang, sound of a door slamming] Describer: A woman runs hurriedly out of a house and toward her husband who is mowing the lawn. Lisa: Do you know where Scruffy is?! Describer: Man stops mowing and looks puzzled at his wife. Dan: I haven't seen him for twenty minutes. [Sound of digging] Dan: On no! Scruffy is in the flower beds.

31 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 3: Caption Display - Preparation z Ensure media edited and final z Transcript spellchecked z Before import, reformat transcript – save as .txt file z Single space between each sentence z Double space z Create a new caption z Clearing caption / long pause z After last line to avoid drop last caption z Check timecode is 0:00:00.00 and your final timecode is empty caption at end of media

32 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Caption Display – Preparation

Need: z Text editor (i.e. Notepad) z Video z Video player

1. Listen to video and pause. ¾ After about 10 or more words

2. Tips ¾ Move to next line when you think caption break is appropriate. ¾ Don’t need every word – OK leave out stuttering, unnecessary, etc/ ¾ Check formatting is correct: ¾ >>Speaker’s name ¾ [ Non-audible information in brackets ]

33 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 3: Captions Display: Interface

34 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 3: Caption Display - Styles z Contrast background & font color z Black/white/transparent background z Black/yellow letters z Case: All caps or mixed acceptable z Font Type: Sans-serif (Arial, Helvetica, Verdana) z Font-Size: 12 pt z Position: Bottom z Alignment: Left-align or center

35 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 3: Caption Display - Size z Caption width usually same width as video z Caption heights ~ 80 px z Amount of words that can display in the caption area depends on size defined

36 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 3: Caption Display – Resources z Captioning Key: Guidelines & Preferred Styles z Online or download PDF file z NCAM Accessible Digital Media Design Guidelines z Free online or CD available; e-mail [email protected]

37 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 4: Caption File – Format & Players z Microsoft Windows Media Player z (SAMI) Synchronized Accessible Media Interchange

z Apple QuickTime and Other Devices z (QT) QuickTime Text Track z (SMIL) Synchronized Multimedia Integration Language z (TTXT) Simple Text File

z Real Network Real Player z (RT) Real Text z (SMIL) Synchronized Multimedia Integration Language

z Adobe Flash z (DFXP) Distribution Format Exchange Profile z (TTML) Timed Text Markup Language

z YouTube z (SRT) SubRip, Subtitle z (SBV, SUB) SubViewer

0:00:00.506,0:00:06.506 (Music)

0:00:03.866,0:00:09.866 The organizations that I'm involved

39 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 4: Caption File – Naming z Use consistent naming convention to identify which caption files go to video file z Use separate folders for different media caption files z Both SAMI and SMIL use .smi or smil extension z Always save SMIL files with the .smil extension z Always save SAMI files with the .smi extension.

40 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 4: Caption File - Multiple languages z XML File size can impact the performance of the caption display z Because has to load the whole file, use a single XML Captioning file for each language z If use online translation tools to convert to another language, rarely 100% accurate.

41 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Step 4: Caption File Converters

z .srt to DFXP Converter http://captioning.stanford.edu/convert.php

42 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Example: Searchable Video ecorner: Stanford's Entrepreneurship Corner

43 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Example: Accessible Video z Perkins School for the Blind Webcasts, showcase for embedded Flash videos containing both captions and audio descriptions

44 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved You Tube z Intellectual property or privacy concerns? z Upload video z Formats: .AVI, .MOV, .WMV, .MPG z Maximum size: 2 GB z Maximum length: 10 minutes

z Captions & Subtitles http://www.youtube.com/t/captions_about

Need: z YouTube account z Your video in English-language (uploaded to YouTube)

After login to your YouTube Account: 1. Go to My Videos & select video to “Edit” 2. Captions and Subtitles > “Request Processing” ¾ Only shown if video has not been processed 3. “Machine Transcription (processing)” under caption tracks ¾ Available after few days

46 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved YouTube Auto-Timing: Transcript Tips z Identify long pauses (3 seconds or longer) or music in the transcript with a double line break. z Use double line breaks anytime you want to force a caption break. z Descriptions inside square brackets like [music] or [laughter] to convey sound effects. z Use >> at the beginning of a new line to identify speakers or change of speaker.

Need: z YouTube account z Your video in English-language (uploaded to YouTube) z Transcript in English (.txt) of your video

After login to your YouTube Account: 1. Go to My Videos & select video to “Edit” 2. Captions and Subtitles > “Add New Captions or Transcript” 3. Attach your transcript and select type: “Transcript file”. 4. If desired, provide file name (English by default). 5. Select “Upload file” 6. Displays under “Available Caption Tracks”

Need: z YouTube account z Your video in English-language (uploaded to YouTube) z Caption file (.SUB or .SRT) of your video

After login to your YouTube Account: 1. Go to My Videos & select video to “Edit” 2. Captions and Subtitles > “Add New Captions or Transcript” 3. Attach your caption file and select type: “Caption file”. 4. If desired, provide file name (English by default). 5. Select “Upload file” 6. Displays under “Available Caption Tracks”

49 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved YouTube Caption File Download

Need: z YouTube account z Owner of video

After login to your YouTube Account: 1. Go to My Videos & select video to “Edit” 2. Captions and Subtitles pane 3. Under Caption Tracks, Download – English: Machine Transcription 4. Captions.sbv file will be saved z Text file with timecode information – use with caption software or open in text editor (i.e. Notepad)

50 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Tips for Optimizing Flash Video Access z Assign text equivalents z Animation: looping elements inaccessible, user control of motion z Use accessible components – enable Accessibility() z Enable control over reading order z Facilitate keyboard access to all controls z Provide captions z Provide accessible video controls z Enable control over audio playback z Expose structure z Expose state of controls z Use color wisely z Validate for accessibility

51 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Accessible Video: Handheld Media & Mobile Devices z What You Need z Video file: .mov z Closed caption file: .mp4 z Specialized tools, time – only on Mac z Resources: z Captioning Media for iTunes http://captioning.stanford.edu/itunes.php z Creating Accessible iTunes U Content http://deimos3.apple.com/WebObjects/Core.woa/Browse/wgbh.org.201057 9900 - PDF: http://ncam.wgbh.org/file_download/103 z Captioning Solutions for Handheld Media and Mobile Devices http://ncam.wgbh.org/invent_build/web_multimedia/mobile-devices

52 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Examples: Captioned Podcast

Academic Technology Report Podcast

ASL Video Podcast on Disability Law Disability Law Lowdown (DLL) Podcast Disability Law Lowdown (DLL) Podcast in Espanol

53 Accessible Technology On-line Seminar Series – A Project of the ADA National Network by DBTAC, Coordinated by the DBTAC: Great Lakes ADA Center © 2010 All Rights Reserved Advancing Accessible Video z Model policies & standards z Develop accessibility statement z Advocate for more captioned media z Promote awareness of accessibility z Show your appreciation of captioned media z Participate and support training on captioning z Compile & share resources

Marsha Schwanke Burton Blatt Institute (BBI) – Syracuse University [email protected] Accessible Technology On-line Seminar Series ada-audio.org

A Project of the ADA National Network by DBTAC Toll-free: (800) 949-4232 [voice/tty] Web: adata.org

Coordinated by the DBTAC: Great Lakes ADA Center Toll-free: (877) 232-1990 [voice/tty]