Can You Create Accessible Websites Using Flash?

About the Presentation

Adobe Flash is a multimedia technology used to add animation and interactivity to web pages. Flash Movies are used for everything from simple animations to complete interactive applications, and Flash Video has become the leading video format on the web.

Adobe has been working hard to make sure Flash is accessible to people with disabilities, but the techniques are still new — and sometimes painful.

This presentation will discuss what Flash technology is, how it can and should be used, and what you need to know to ensure that is accessible to everyone.

About the Presenter

Mike Scott is an assistive technology and accessibility specialist with MSF&W Accessibility Solutions in Springfield, Illinois.

Mike works with a wide range of public- and private-sector clients to help assess the accessibility of existing systems, design and develop new accessible systems, and train staff on how to successfully implement accessibility in system design and development.

Mike has spearheaded many accessibility initiatives, including development of the Illinois Web Accessibility Standards and the Illinois Information Technology Accessibility Act.

Requirements

To view some of the examples used in this presentation, you will need to have Adobe Flash Player 10 installed and enabled. The test movie below should indicate whether Flash Player is installed and working on your system:

Flash is:

• A technology (Adobe Flash Platform)
• A player (Adobe Flash Player)
• An authoring tool (Adobe Flash CS4 Professional)

• Vector-based = small file-size, scalable images
• Animation = images (frames) that change over time
• for the Web = cross-platform

Animation

Interface

Video

Accommodating People with Disabilities

• People with low vision or blindness
• People with limited use of their hands
• People who are deaf or hard of hearing
• People with learning disabilities

Assistive Technology

• Large fonts & high contrast
• Screen magnifiers (ZoomText, MAGic)
• Screen readers (JAWS, Window-Eyes)
• Speech recognition (Dragon NaturallySpeaking)
• Closed captioning

Accessibility Standards

• Web Content Accessibility Guidelines 1.0
• Web Content Accessibility Guidelines 2.0
• Section 508 Standards

Animation

• Series of images (frames) that change in time
• May include text
• May include audio (but not speech)

Accessibility Issues

• Avoid strobing - for users with photo-sensitive epilepsy
• Avoid distraction - for users with vision or cognitive disabilities
• Communicate equivalent information - for users who are blind

Techniques

Provide "alternate text."

• Find the Accessibility Panel
• Windows > Other Panels > Accessibility
• Shift + F11

For decorative animations...

• Uncheck "Make movie accessible"
• Leave Name blank
• Leave Description blank

For meaningful animations...

• Check "Make movie accessible"
• Uncheck "Make child objects accessible"
• Enter alternate text in Name and/or Description

For complex meaningful animations...

• Consider providing an HTML alternative

Note: Flash cannot replace HTML

• No headings
• No lists
• No tables
• No abbreviations
• No structure

In Practice...

• JAWS does not read movie Name or Description
• Window-Eyes does not reliably read movie Name or Description

A workaround?

• Set wmode to opaque or transparent to reveal alternate content

In Summary

• Decorative animations can be used if they don't strobe and aren't distracting
• Provide alternate content for meaningful animations using:
  • Movie Name and/or Description
  • Object content (with wmode)
  • Elsewhere on the page

Interface

• Animations that take different courses based on user actions
• May include user interface elements such as:
  • Buttons
  • Menus
  • Text boxes
  • Drop-down lists
  • etc...

ActionScript

• JavaScript-like programming language
• Watches for "events" - e.g., hover, click, etc.
• Responds with actions

Components

• Pre-built Flash objects that mimic standard user interface controls

Accessibility Issues

• Usability - for users with cognitive impairments
• Keyboard operability - for users with limited use of hands
• Screen reader compatibility - for users who are blind

Techniques

Use standard controls.

• Button
• Text Input
• Text Area
• Checkbox
• Radio Button
• List

Enable accessibility.

• Two lines of
  ActionScript
  for each
  type of control

Label controls.

• Try "Auto label"
• Rely on "Name"

Avoid custom controls.

• Must reveal:
  • Name
  • Role
  • State
  • etc....

Set reading/tab order.

• Limit the size of the stage
• Name component instances
  and set "Tab index"
• Use an alternate off-stage interface

Consider conceptual issues.

• Screen readers are linear
• Simple GUIs are two-dimensional
• Animated GUIs are three-dimensional (including time)
• Ask: could I find what just changed if I couldn't see?

In Practice...

• Except for the simplest examples, making Flash
  user interfaces accessible is very difficult
• Consider whether it is worth the effort

In Summary

• It may be possible to make simple Flash interfaces accessible
• Keep it simple
• Plan to test...

Video

• Recorded full-motion video,
  e.g., from camcorder or screen capture
• Including synchronized audio
• FLV, F4V, and related formats

Accessibility Issues

• Keyboard-operable playback controls - for people with
  limited use of their hands
• Screen-reader compatible playback controls - for people
  who are blind
• Captioning - for people who are hard of hearing or deaf

Techniques

Use Flash CS4 playback controls (skins).

• Keyboard-operable
• Screen-reader compatible

Use the FLVPlaybackCaptioning component.

• Makes attaching external caption files easy
• Uses industry standard Timed Text
  (DFXP) format

Use subtitle-horse to create caption files.

• Free, web-based service
• Produces Timed Text & SRT (YouTube) formats
• www.subtitle-horse.org

Other captioning tools:

• MAGpie
  ncam.wgbh.org/webaccess/magpie
• Captionate
  www.buraks.com/captionate
• Hi-Caption
  www.hisoftware.com/hmcc

In Summary

• CS4 playback controls are accessible!
• FLVPlaybackCaptioning component makes attaching captions easy
• www.subtitle-horse.org

Adobe Captivate

Adobe Captivate

• Designed to help non-technical users
  create Flash-based e-learning presentations
• Powerful screen recording feature
• Top-notch closed captioning tool

In Practice...

• A number of documented accessibility features are broken
• Cannot use simulations or quizzes
• See www.msfw.com/accessibility/techniques/captivate3.aspx

Adobe Flex

Adobe Flex

• Powerful integrated development environment
  for rich Flash-based applications
• Claims to have 28 accessible interface components
• Custom JAWS scripts

In Practice...

• Have not made an accessible example work yet...
• Scripts for JAWS 10?

• Adobe Flash CS4 Professional Accessibility
  www.adobe.com/accessibility/products/flash
• MSF&W Accessibility Techniques
  www.msfw.com/accessibility/techniques
• Great Lakes ADA Center
  www.adagreatlakes.org