Techniques for Creating Accessible, Closed Captioned WebBased Video

1
Techniques for Creating Accessible, Closed
Captioned Web-Based Video
David Klein K. Fritz Thompson

• California State University - Northridge21st
  Annual International Technology and
• Persons with Disabilities Conference
• Los Angeles, California
• March 22, 2006
• http//disability.law.uiowa.edu/lhpdc/publications
  /kleinpubs.html

2
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

3
Conventional Embedding

• Object parameters
• File location
• Embed parameters
• File location

4
Embedding QuickTime

• 88ABDDC6B"
• width"260" height"316"
• codebase"http//www.apple.com/qtactivex/qtplugin
  .cab"
• value"http//www.yourdomain.com/video_smil.mov"
  
• .mov"
• width"260" height"316"
• pluginspage"http//www.apple.com/quicktime/down
  load/"

5
HTML for Media Player

• height"276" alt"Click here to launch Windows
  Media Player version in new window"

6
Embedding Flash Video Player

• 553540000"
• codebase"http//fpdownload.macromedia.com/pub/sh
  ockwave/cabs/flash/swflash.cabversion7,0,0,0"
• width"340" height"440" id"video"
• value" http//www.yourdomain.com/video.swf" /
• quality"high" width"340" height"440"
  name"video"
• type"application/x-shockwave-flash" base"."
• pluginspage"http//www.macromedia.com/go/getflas
  hplayer" /

7
Embedding Issues

• tag not a standard doesnt 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

8
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
• http//blog.deconcept.com/flashobject/

9
Satay Method of Embedding

• Eliminates the use of the tag
• Uses only the tag
• Anything that a browser doesnt understand is
  ignored
• If Flash is not installed within a browser, a
  default message will be displayed
• http//www.alistapart.com/articles/flashsatay/
• http//allinthehead.com/retro/234/embedding-macrom
  edia-flash-in-xhtml
• May not work with some (older) browsers and JAWS
• May display two players in newer browsers

10
Satay Method Example

• 553540000" codebase"http//download.macromedia.co
  m/pub/shockwave/cabs/flash/swflash.cabversion6,0
  ,40,0" width"100" height"100"
• 02.swf" / http//domain.com/" /
• width"100" height"100" type"application/x-sho
  ckwave-flash"
• / omedia.com/go/getflashplayer" / You do not
  have the Flash player installed. See href"http//www.macromedia.com/go/getflashplayer"
  title"Click here to get the Flash Player"
  http//www.macromedia.com/go/getflashplayer.p

11
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

12
Resources

• WebAIM
• http//www.webaim.org/techniques/captions/
• World Wide Web Consortium Web Video Standards
• http//www.w3.org/AudioVideo/
• National Consortium on Accessible Media (MAGpie)
• http//ncam.wgbh.org/webaccess/magpie/
• Hi Software (HiCaption)
• http//www.hisoftware.com/hmcc/acc4mcc.html
• Captioned Media Program
• http//www.cfv.org
• National Association of the Deaf
• http//www.nad.org/

13
Resources II

• Video Compression
• Ben Waggoner book
• SMIL (QuickTime)
• http//www.apple.com/quicktime/technologies/intera
  ctivity/smil.html
• W3C Guidelines for SMIL
• http//www.w3.org/TR/REC-smil/ (SMIL 1.0 general)
• http//www.w3.org/TR/SMIL2/ (SMIL 2.1 general)
• http//www.w3.org/TR/SMIL2/smil-timing.html
  (about synchronizing)
• Windows Media Player / Metafiles
• http//msdn.microsoft.com/library/default.asp?url
  /library/en-us/wmplay10/mmp_sdk/asx_elementsintro.
  asp

14
Resources III

• Captioning
• Joe Clark http//www.joeclark.org/access/captioni
  ng/
• Creating Accessible Flash
• http//at.ufl.edu/accessibility/ela/Accessible_Fla
  sh/index.html
• Embedding Multimedia
• Flash and tagshttp//www.macrome
  dia.com/go/tn_12701
• Flash Object (using JavaScript)http//blog.deconc
  ept.com/flashobject/
• Joe Clarkhttp//www.joeclark.org/access/captionin
  g/bpoc/embed-object.html
• Flash Satay Method (may not be accessible to
  screen readers)http//www.macromedia.com/devnet/d
  reamweaver/articles/flash_satay.html

15
Contact

• Law, Health Policy Disability Center
• http//disability.law.uiowa.edu/
• LHPDC Bulletin Board (download Flash playback
  engine)
• http//disability2.law.uiowa.edu/dbtac

David Klein 280-1 Boyd Law Bldg. College of
Law University of Iowa Iowa City, IA
52242 319-335-6748 david-klein_at_uiowa.edu
K. Fritz Thompson 280-1 Boyd Law Bldg. College
of Law University of Iowa Iowa City, IA
52242 319-335-6748 kenneth-d-thompson_at_uiowa.edu