Using the access button

The access button provides one go-to point for both visually and mobility impaired users to receive visual descriptions and instructions on how to play the game (see Figure 6). For this button I chose the Universal Access symbol by Apple Computer.

Figure 6. Universal Access symbol

By including visual descriptions in this manner, you take the alt text out of the game flow of the game. Users can go to the access button once to get the overall game description and instructions on how to play by tabbing. Then they can easily tab through the selectable elements needed to play the game without having to hear the same alt text over and over again.

Both visually and mobility-impaired users can use the Tab key to navigate through a Flash application. Therefore, you want to include instructions on how to play the game using the keyboard, both in audio and in a visual format. For mobility-impaired users, you can include a keypress overlay that appears when users press the access button (see Figure 7).

Figure 7. Keypress overlay

A keypress overlay can also be helpful in displaying any keyboard shortcuts you might have programmed into your game. In the Library of FrogLifeCycle.fla, you will find this keypress overlay as the movie clip mc_keypress. Move it into the starter file and then export the movie clip by right-clicking it in the Library and selecting the Export for ActionScript option in the Linkage Properties dialog box (see Figure 8).

Figure 8. Linkage Properties dialog box

You want the overlay to appear when users press the access button. You also want the audio to come up, which will give users a visual description of the game as well as instructions on how to play it. When all the pieces have been placed, the visual description can change to one that describes the finished puzzle:

btn_access.onRelease = function() {
     if (total <5) {
         playSound("expl");
         _root.attachMovie("mc_keypress", "mc_keypress",11);
         mc_keypress._x += offset; 
        mc_keypress._y += offset;
     } else {
         playSound("expl2"); 
    }
 } 

When you press the access button now, the overlay appears in the top-left corner. Adjust it so that it appears more in the middle of the screen:

var offset = 50;
 btn_access.onRelease = function() {
     playSound("expl");
     _root.attachMovie("mc_keypress", "mc_keypress",11); 
mc_keypress._x += offset; 
mc_keypress._y += offset;
 } 

When you roll away from a button, you want the audio to stop. On rollover, you want the rollover audio to play:

btn_access.onRollOver = function() {
     playSound("access");   
 }
 btn_access.onRollOut = function() {
     stopAllSounds();   
     mc_keypress.removeMovieClip();
 } 

Finally, add a checkFinal() method to the placePiece() method to check whether or not all pieces have been placed. If they have all been placed, you can play an end message:

function checkFinal() {
     if (total >= 5) {
         if (tabbingON) {
             playSound("final");
         }
     } 
} 

Now the Life Cycle of the Frog game is a complete, self-voicing activity, accessible to everyone.

There are several ways you could extend this game. You could build an on/off button for mobility-impaired users who may not want to listen to the sound and cannot turn off their computer’s sound externally. You would have to make sure that there is always a rollover on the sound on/off button, so that visually impaired users avoid an audio trap. An audio trap can form when users turn off the audio button—and therefore also the self-voicing audio. Because they can’t hear the button rollovers, they would be unable to turn the audio back on.

After we at Snert Studios tested this game for usability, one visually impaired student came up with the idea of switching the focus to the drop spots after selecting a puzzle piece. This was to prevent players from having to cycle through the other puzzle pieces after picking one up. You can implement this change with the Selection.setFocus() method, which resets the focus rectangle in Flash.

Visually, you can add a “selected” state to the puzzle pieces so that users with low vision who are selecting through tabbing can see which puzzle piece they have selected.

Accessible click and drop can be turned into accessible drag and drop by changing the onPress/onPress events on the movie clips to an onPress/onRelease event. We chose click and drop for this game because younger users have usability issues with drag and drop—which requires holding the mouse button down while moving the mouse at the same time.

For puzzles like this one, it might be beneficial to give players feedback as to which puzzle pieces have been placed and where. You can accomplish this by using a different rollover on the pieces that have been placed, instead of leaving them out of the tab order.

Finally, you can program keyboard shortcuts to facilitate access to buttons that are often used. In this puzzle game, you could add a keyboard shortcut to the access button, for example, so that users could press A (for “access”) to hear the instructions again without having to tab to the button itself. You could add an A to the keypress overlay, near the button, to indicate the shortcut visually. The shortcut can also be added to the auditory instructions that the access button plays.