1 / 38

Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX. Michael A. Jordan Houghton Mifflin Company. Introduction.

suzanne
Download Presentation

Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX Michael A. Jordan Houghton Mifflin Company

  2. Introduction • This presentation will explore some of the techniques employed and lessons learned in our experience developing accessible Flash content for elementary school children for • Houghton Mifflin’s Education Place®. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  3. Introduction (cont.) • We will examine three applications currently deployed on Education Place… Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  4. Introduction (cont.) • Example application: • Houghton Mifflin Reading 2005(http://www.eduplace.com/kids/hmr05/) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  5. Introduction (cont.) • Example application: • GeoNet(http://www.eduplace.com/geonet/) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  6. Introduction (cont.) • Example application: • Tackle Reading Crossword Puzzles(http://www.eduplace.com/tacklereading/puzzles.html) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  7. Development Environment • The applications were built with Macromedia Flash MX. • Released in 2002 • With Flash Player 6, this was the first version of Flash to support accessibility through Microsoft Active Accessibility (MSAA) • Many of the techniques can work with the latest version of the Flash development environment, Macromedia Flash MX 2004. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  8. Flash Accessibility Support • Flash uses Microsoft Active Accessibility (MSAA) to communicate accessibility information from the Flash Player up to the screen reader. • It works using: • The ActiveX version of the Flash Player running in Internet Explorer on Windows PCs Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  9. Flash Accessibility Support: Compatible Screen Readers • Screen readers that support MSAA: • JAWS for Windows 4.5(http://www.freedomscientific.com/fs_products/software_jaws.asp) • Window-Eyes 4.2 or above(http://www.gwmicro.com/products) • IBM Home Page Reader 3.04(http://www-306.ibm.com/able/) • Trial versions are available. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  10. Accessibility Goals • To provide keyboard access and screen reader support for all application controls, buttons and user-interface functions. • To provide meaningful text equivalents for visual elements. • To provide a logical reading order for the content. • To meet state and Section 508 requirements for access to Web-based intranet and Internet information and applications. • To provide an engaging and usable experience to users with disabilities. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  11. Why Flash? • We used Flash as our development environment for a number of reasons: • GeoNet needed to be delivered on CD-ROM as well as over the Web. With Flash, we could build once. • We could reduce the server load somewhat in comparison to CGI solutions. And… Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  12. Why Flash? • The kid’s seem to like it. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  13. Basic Strategies • First, I’d like to go over some of the basic strategies you can use to design and implement accessibility in Flash. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  14. Basic Strategies • Some resources: • Bob Regan’s whitepaper:Best Practices for Accessible Flash Design(http://www.markme.com/accessibility/files/whitepaper.htm)and his Accessibility Blog(http://www.markme.com/accessibility/) • Flash MX 2004 Documentation(http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00000553.html) • Rich Media Accessibility Center(http://ncam.wgbh.org/richmedia/mediatypes/FL.php) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  15. Basic Strategies: Keyboard Access • Any controls that can be manipulated by a mouse must also be accessible by keyboard. • The Flash Player automatically makes mouse-defined events keyboard accessible. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  16. Basic Strategies: Freedom and Responsibility • The Flash programming environment gives designers and developers a tremendous amount of freedom to create custom controls and interactions. • With that freedom comes the responsibility of making these controls accessible. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  17. Basic Strategies: Control Reading/Tab Order • The Flash player uses a weighted formula to calculate the default reading order of a Flash application. • For the most part, this will not result in a logical or predicable reading or tab order for anything but the simplest of Flash movies. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  18. Basic Strategies: Control Reading/Tab Order • To assure a proper reading and tab order: • Assign a tab index property with ActionScript to every instance in the movie (even those instances you wish to remain silent or to leave out of the tab order). • Avoid using static text. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  19. Basic Strategies: Providing Text Equivalents • You can provide text equivalents for elements within your Flash applications in two ways: • By entering it in the Accessibility Panel For entire movies For symbol instances Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  20. Basic Strategies: Providing Text Equivalents • Or with ActionScript: this._accProps = new Object(); this._accProps.name = “Vince Lombardi Trophy”; this._accProps.forceSimple = true; this._accProps.silent= false; Accessibility.updateProperties(); Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  21. Basic Strategies: Providing Text Equivalents Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  22. Basic Strategies: Using ActionScript • ActionScript gives us many of the tools we need to develop accessible Flash applications. We can: • Detect whether or not a screen-reader is running • Assign name and description attributes dynamically • Control which elements in the movie are silent which can be read by a screen-reader • Define the tab and reading order • Control keyboard focus Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  23. Basic Strategies: Get Creative • It’s up to designers and developers to use these tools creatively to enable and enhance the accessibility of Flash applications. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  24. Basic Strategies: Provide Context • It’s a good idea to provide context to the screen reader user by: • Providing a description of the purpose of controls. • Exposing state. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  25. Houghton Mifflin Reading 2005: An accessible scrolling Flash menu • Houghton Mifflin Reading 2005(http://www.eduplace.com/kids/hmr05/) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  26. Houghton Mifflin Reading 2005: An accessible scrolling Flash menu • Houghton Mifflin Reading 2005 themes and selections(http://www.eduplace.com/kids/hmr05/?grade=1) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  27. GeoNet: An accessible geography quiz game • GeoNet(http://www.eduplace.com/geonet/) Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  28. GeoNet: Glossary term text links • GeoNet game screen showing glossary term Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  29. GeoNet: Tab-accessible TextField links solution • Used ActionScript to extend the TextField prototype to create proxy MovieClips for links embedded in a TextField instance. • http://proto.layer51.com/d.aspx?f=1209 • * Credit goes to Niels Wolf (aka k-zimir) for his handy HTML-parsing functions. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  30. GeoNet: Helpful hint • Tab indexes do not have to be consecutive, but they must be unique for each instance. • When a page required dynamic content, we were able to leave ranges of tab indexes available to provide a logical order. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  31. GeoNet: Lesson learned • Name instances and assign tabIndexes! • HiSoftware’s AccRepair extension for Flash MX 2004 is a useful tool for locating missed nested or unnamed instances and static text. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  32. GeoNet: Last resort > The recursive loop Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  33. Tackle Reading Crossword Puzzle • Without a screen reader: • Tackle Reading Crossword Puzzles Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  34. Tackle Reading Crossword Puzzle • With a screen reader: • Tackle Reading Crossword Puzzles Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  35. Tackle Reading Crossword Puzzle • Showing the browser chrome: • Tackle Reading Crossword Puzzles Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  36. Other Considerations • Provide captions or onscreen text-equivalents for spoken audio and video. • Choose color wisely. • Avoid blinking. • Provide way of increasing or decreasing the text size. • Provide audio playback controls. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  37. Conclusion • Developing accessible Flash content is a challenging and emerging field. • Accessible Flash is an achievable goal. • As more developers and companies recognize accessibility as an essential user-requirement in Flash design, we can expect the range, quality and utility of accessible Flash applications to grow significantly. Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

  38. References Strategies for Building Accessible Learning Web Applications and Games with Macromedia Flash MX

More Related