Flash Accessibility

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

Animation

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

Accessibility Issues

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

Accessibility Techniques

• Find the Accessibility Panel
  (Windows > Other Panels > Accessibility)
• Make movie accessible
• Make child objects accessible
• Use "Name" or "Description" for alternate text

In Practice...

• JAWS does not read movie name or description
• JAWS reads either child object name or description
• Window-Eyes does not reliably read movie name or description
• Window-Eyes reads both child object name and description

In Summary

• Turn accessibility features on
• Provide alternate text in child object name or descriptions
• Be sure animations don't strobe and aren't distracting

Remember: Text cannot replace HTML

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

Another Catch

• wmode="opaque" or "transparent" will hide the movie

Window-Eyes will read alternate content; JAWS won't

Interface

• Animations that take different courses based on user actions
• Including:
  • 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

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

Accessibility Techniques

Use “accessible” controls:

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

Enable accessibility:

• Add two lines of ActionScript for each type of control

Label controls:

• Use “Name”

Set reading/tab order:

• Limit the size of the stage
• Name component instances
• Set “Tab index”

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

Accessibility 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
• Uses custom JAWS scripts

In Practice...

• Have not made an accessible example work yet...
• See www.msfw.com/accessibility/tests/flex