majordan .net

Contact me at: michael@majordan.net

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

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® (http://www.eduplace.com). We will examine three applications currently deployed on Education Place, the companion site for a textbook program (http://www.eduplace.com/kids/hmr05/), a geography quiz game (http://www.eduplace.com/geonet/), and an accessible crossword puzzle (http://www.eduplace.com/tacklereading/puzzles.html). The applications were developed with Macromedia Flash MX, but many of the same techniques and principles will work with the latest version of the Flash development environment, Macromedia Flash MX 2004.

Our accessibility goals for these applications were:

We used Flash as our development environment for a number of reasons:

Houghton Mifflin Reading 2005
An accessible scrolling Flash menu

The menu pages on the companion site for Houghton Mifflin Reading 2005 became an important testing ground for our efforts in building accessible Flash from dynamic content. The pages are the only entry point to the site, so accessibility and usability were essential user requirements.

Students get to the supporting materials for their grade levels by interacting with two screens. We split these into separate HTML pages and Flash movies to allow users to navigate using the browser's Back button and to reduce the initial download time. A student chooses his/her grade, by selecting either a cubby or a locker from the index page. We assigned text equivalents to these buttons using the Accessibility panel in Flash MX. We assigned tab indexes to all the actionable elements in the movie using ActionScript. This screen also contains some animations of the Education Place cartoon characters that we hid from screen reading software by un-checking "Make object accessible" in the Accessibility panel.

The second menu screen contains a scrolling list of all the themes and selections for the student's chosen grade. We load them from an external XML file into one of two layout templates, a locker for the older students and a cubby for the younger ones.

The conversion of XML into Flash content is handled the same way in both movies. Once we load and parse the XML, we use ActionScript to build the menu of themes and selections. As we loop though the XML, we add accessibility properties and define a tab index for each element in the menu. Once the menu has been created, we will set it as the content for a skinned ScrollPane component instance on the stage. A nice feature of the ScrollPane component is that by including it in the tab order and setting it to be tab-enabled, a user can control the scroll-position of the menu using the arrow keys on the keyboard.

As a user tabs through the list of menu items, the menu items scroll into view within the scroll-pane. This is a behavior that involved a work-around for some of the default ways that Flash handles keyboard access. Typically, the Flash Player draws a yellow focus rectangle on the stage to show that an interface element has keyboard focus. The problem is that once the rectangle appears on the stage, it cannot move with the object with which it is associated. In our application, when the user tabbed to a menu item outside the bounds of the scroll-pane, the focus rectangle would appear outside of the bounds as well, and it would stay there even when the menu item scrolled into view. We can disable this focus rectangle by setting the _focusrect property of the menu item to false, but that has the adverse effect of removing the capability of activating the button with either the Enter key or Space Bar. We solved this problem by adding a Key listener to each menu item when it acquires keyboard focus and removing the listener when the menu item loses focus. With the same onSetFocus event, we display a rectangle drawn with ActionScript as part of the menu item movie clip so that it can move with it as the menu item scrolls into view.

GeoNet
An accessible geography quiz game

GeoNet is a dynamic multiple-choice geography quiz game for students in Grades 3 and above. It is an update of an older Web-based game built with PERL. The new game features expanded content, and developing the game with Flash allowed us to deliver it as both a CD-ROM product and over the Web. GeoNet contains nearly 1,200 questions organized by region, difficulty level, and according to the six essential elements from the National Geography Standard.

GeoNet also contains a glossary of terms that students may need to know to answer the questions. These terms are called from text links that appear inline in the context of a question or explanation. Early on, we realized that this presented a problem for keyboard accessibility, because, while Flash MX can render anchor links in text fields clickable with the mouse pointer, it provides no way to include the links in the tab order or to activate them with the keyboard. Thankfully, with ActionScript and some inspiration from the Flash developer community, I was able to develop a prototype function to overcome this limitation. This prototype function is available to developers at http://proto.layer51.com/d.aspx?f=1209. It basically works by first looping through the text field's HTML text-string to create an array of the anchor tags and their string index positions, then it creates tiny, transparent proxy movie clips in the text field's parent movie clip to handle keyboard focus and key-listener events. It assigns tab indexes and Accessibility properties to each of the proxy clips so that they can be read by the screen-reader, and it assigns default and keyboard-focused styles to the links.

  • Figure 3—GeoNet game screen showing glossary term link and pop-up window
  • Figure 3—GeoNet game screen showing glossary term link and pop-up window

A useful tip we used is that you do not need to assign your tab indexes in consecutive order. You can space them out to leave room for other elements that may need to be added to the stage and included in the read order.

As the student moves through the quiz and the content changes, we set new Accessibility property names using ActionScript. After a set of changes we call Accessibility.updateProperties() to update what the screen-reader reads.

One lesson we learned the hard way testing GeoNet with a screen-reader is the importance of naming and assigning a tab index to every object that appears in your movie even if you do not intend to make it accessible. If you work as part of a team developing an application, it's likely that you'll receive content from another designer or developer who may not understand the dos and don'ts of accessible Flash design. If you work with Flash MX 2004, Hi-Software's AccRepair extension for Flash is a useful tool for fixing issues with this kind of content. But if all else fails, you can build an ActionScript function to loop though all the movie clips and/or text field objects at runtime, test if each one has a defined tab index (usually if I haven't assigned a tab index to an object, it shouldn't be marked for accessibility), and if not, assign an incrementing high-numbered tab index starting at say, 3000, and set the Accessibility property of the object to make it silent. This seems to go a long way toward fixing read-order issues in movies where you may not be aware of every object on the stage.

Tackle Reading Crossword Puzzle
An accessible crossword puzzle engine

Our crossword puzzle engine is an example of a more complicated accessible Flash application. There are a number of Flash crossword puzzles available online, many with excellent keyboard support, but I was unable to find one that could played with a screen-reader. The ability to program Accessibility properties dynamically with ActionScript allows us to give the user meaningful feedback about his/her progress solving the puzzle. In our initial prototypes, our crossword puzzle engine filled in cells in the puzzle by monitoring the user's keyboard entries.

  • Figure 4—Crossword puzzle without screen reader running
  • Figure 4—Crossword puzzle without screen reader running

This works great for sighted and keyboard-only users, but we realized, after some initial tests, that this would be problematic for screen-reader users. The screen-reader intercepts many keys as keyboard commands unless the user's cursor is in a form input field with Forms Mode on for JAWS or MSAA mode off for Window-Eyes.

  • Figure 5—Crossword puzzle with screen reader running
  • Figure 5—Crossword puzzle with screen reader running

This is where object-oriented programming methods paid off. We can detect if a screen-reader is running with ActionScript by calling the Accessibility.isActive() function. Then, to allow the screen-reader user to enter answers into form fields, we simply use a different Class for the movie clips that display the clues. When a screen reader user enters an answer, we monitor the form field for changes and then update the Accessibility properties, the crossword puzzle grid, and any other fields that may be changed by the user's input.

Another discovery we made when developing this puzzle is that form fields and buttons that exist in you movie but extend beyond the Stage area and beyond the bounds of the object tag in your web page will not be accessible to the screen reader and may mess up your read order. As our scrolling lists of clues grew longer with different puzzles, this became a problem. Our workaround was to make the Flash movie extremely tall, 1000 pixels in fact, and then use a pop-up window with scroll-bars disabled to reveal only the portion of the clip we wanted the sighted user to see.

Conclusion:

Developing accessible Flash content is a challenging and emerging field, but accessible Flash is an achievable goal. As more developers and companies recognize accessibility as an essential user-requirement and accept the challenge of developing for accessibility, we can expect the range, quality, and utility of accessible Flash content to grow significantly. I know that we at Houghton Mifflin intend to continue the journey.

References:

Byron DL, Benish, S. (2004) Flash MX Accessibility Retrieved September 29, 2004 from http://texturadesign.com/html/speaking_flash.htm.

Houghton Mifflin Company (2004) Kid's Place: Houghton Mifflin Reading Retrieved September 29, 2004 from http://www.eduplace.com/kids/hmr05/.

Houghton Mifflin Company (2004) GeoNet Game Retrieved September 29, 2004 from http://www.eduplace.com/geonet/.

Houghton Mifflin Company (2004) Tackle Reading: Crossword Puzzle Retrieved September 29, 2004 from http://www.eduplace.com/tacklereading/puzzles.html.

Jordan, M. (aka majordan), Wolf, N. (aka k-zimir) (2004) TextField.prototype.highlightLinks() ActionScript prototype function Retrieved September 29, 2004 from http://proto.layer51.com/d.aspx?f=1209.

Accessibility: Macromedia Flash MX Features (n.d.) Retrieved September 29, 2004 from Macromedia Accessibility Resource Center website. http://www.macromedia.com/macromedia/accessibility/features/flash/

NCAM Rich Media Accessibility Resource Center (2004) Retrieve from http://ncam.wgbh.org/richmedia/.

Regan, R. (May 2004) Best Practices for Accessible Flash Design Retrieved September 29, 2004 from http://www.markme.com/accessibility/files/whitepaper.htm.

Bob Regan: Accessibility Weblog (May 2003 - September 2004) Retrieved September 29, 2004 from http://www.markme.com/accessibility/.

Section 508 Standards (n.d.) Retrieved September 29, 2004 from Section 508 website. http://www.section508.gov/index.cfm?FuseAction=Content&ID=12.

User Agent Accessibility Guidelines 1.0 (W3C Recommendation 17 December 2002) Retrieved September 29, 2004 from W3C website. http://www.w3.org/TR/UAAG10/.

Web Content Accessibility Guidelines 1.0 (W3C Recommendation 5 May 1999) Retrieved September 29, 2004 from W3C website. http://www.w3.org/TR/WCAG10/.

Contact me at michael@majordan.net. Last updated: Thursday, March 17, 2005