Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and Persons with Disabilities Conference Los Angeles, California March 22, David Klein K. “Fritz” Thompson

Embedding Videos into HTML  Media Player and RealPlayer better external, not embedded  QuickTime & Flash generally better embedded  Internet Explorer generally better with Flash  Use of and tags

Conventional Embedding    Object parameters  File location    Embed parameters  File location    

Embedding QuickTime <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="260" height="316" codebase=" <param name="src" value=" <embed src=" width="260" height="316" pluginspage="

HTML for Media Player </a>

Embedding Flash Video Player <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" cab#version=7,0,0,0" width="340" height="440" id="video"> <param name="movie" value=" /> <embed src=" quality="high" width="340" height="440" name="video" type="application/x-shockwave-flash" base="." pluginspage=" /> </object>

Embedding Issues  tag not a standard; doesn’t validate for XHTML  tag not supported the same on all browsers  Flash somewhat more accessible in Internet Explorer  Player versioning  Downloading / upgrading versions a major pain  Frequently a showstopper for many users  Earlier required versions may show garbage (or blank space) instead of error message  Flash version 7.0 minimum required

Flash Embedding Alternatives  Flash Object method (uses JavaScript) to determine versions and handle errors gracefully  Avoid unacceptable use of or tags  Uses alternative text as a default when all else fails 

Satay Method of Embedding  Eliminates the use of the tag  Uses only the tag  Anything that a browser doesn’t understand is ignored  If Flash is not installed within a browser, a default message will be displayed   macromedia-flash-in-xhtml macromedia-flash-in-xhtml macromedia-flash-in-xhtml  May not work with some (older) browsers and JAWS  May display two players in newer browsers

Satay Method Example You do not have the Flash player installed. See You do not have the Flash player installed. See </object>

Future  Podcasts – See iTunes  Our Flash video player development  Customized controls (larger, more accessible)  More configuration options in external XML file  Customized formatting within captions  Speech recognition  Real-time voice recognition  Automatic time codes (real-time)  Searchable / Linkable video  Use of semantic markup (XHTML) for transcript files that can be used to produce caption files automatically

Resources  WebAIM   World Wide Web Consortium Web Video Standards   National Consortium on Accessible Media (MAGpie)   Hi Software (HiCaption)   Captioned Media Program   National Association of the Deaf 

Resources II  Video Compression  Ben Waggoner book  SMIL (QuickTime)   W3C Guidelines for SMIL  (SMIL 1.0 general)  (SMIL 2.1 general)  (about synchronizing)  Windows Media Player / Metafiles  us/wmplay10/mmp_sdk/asx_elementsintro.asp us/wmplay10/mmp_sdk/asx_elementsintro.asp us/wmplay10/mmp_sdk/asx_elementsintro.asp

Resources III  Captioning  Joe Clark:  Creating Accessible Flash   Embedding Multimedia  Flash and tags  Flash Object (using JavaScript)  Joe Clark  Flash Satay Method (may not be accessible to screen readers) html html html

Contact  Law, Health Policy & Disability Center   LHPDC Bulletin Board (download Flash playback engine)  David Klein Boyd Law Bldg. College of Law University of Iowa Iowa City, IA K. “Fritz” Thompson Boyd Law Bldg. College of Law University of Iowa Iowa City, IA