Recipe 23.5. Making Keyboard-Navigable Movies

Problem

You want to create keyboard shortcuts that duplicate button behaviors, and you want to expose those shortcuts to assistive devices.

Solution

Create keyboard shortcuts that duplicate button actions, using Key.isDown( ). Write code in a modular way, so that it can be accessed in more than one way. Use the Accessibility panel to inform users with assistive devices about the keyboard shortcuts. Specify a logical tab order for buttons, using tabIndex.

Discussion

Movies that rely on buttons to control playback intrinsically rely on users' ability to click on those buttons with a mouse. One way to make movies functional for those who rely on the keyboard is to create keyboard shortcuts. Buttons can be made accessible in one of two ways:

Default keyboard shortcuts: By default, users can execute button actions by setting the focus on the button and pressing Enter or Return. A disadvantage to this approach is that users must tab to the button, which could become unwieldy in a movie with many buttons. A related issue is tab order.
Custom keyboard shortcuts: The developer creates keyboard shortcuts for certain actions. For example, pressing S stops a movie, while pressing P causes it to start playing again. These require a modest amount of extra work but are generally worth it.

These two approaches to button accessibility are not exclusive, and even when you implement custom keyboard shortcuts, default keyboard shortcuts will still be in place.

If you are relying on default keyboard shortcutspressing Enter or Return when a button is in focusyou should specify the tab order. You can tell a button is in focus when a yellow rectangle appears on it. Though the ordering of buttons on a page may be perfectly obvious to a person with sight, Flash does not always correctly guess how the buttons should be ordered for a person tabbing through them.

You can specify button tab order (in this case, button refers to Button instances as well as MovieClip instances with button event handler methods applied to them) using the tabIndex property. Use it with the following syntax, which assumes that the stage has two buttons, with instance names of btFirst and btSecond:

 btFirst.tabindex = 1; btSecond.tabindex = 2;

When using tabIndex, be sure you specify every button that you want included in the tab order. As soon as you apply tabIndex to a button, all other buttons are excluded from tab order, unless you explicitly set their tabIndex properties as well.

Tabbing does not work as expected in Flash's test movie environment, unless Control Disable Keyboard Shortcuts is checked. By default it is not, and pressing Tab has no effect on the movie. Regardless, tabbing does work as expected in the Flash standalone player and within browsers.

Next, if you want to make keyboard shortcuts, you need to add the ActionScript code that detects the key presses and calls the correct functions. You can read more about detecting key presses in Chapter 9.

When you add keyboard shortcuts, you typically want to call the same function whether the user presses the keyboard shortcut or selects the button while it is focused. Often the simplest way to deal with that is to call the event handler method of the corresponding button when the user presses the keyboard shortcut. The following illustrates the concept with a simple example. In the example, you can assume that btStop and btPlay are buttons and mAnimation is a movie clip with a timeline you want to control using the buttons. When the user presses the P key it plays the timeline, and when the user presses the S key, it stops the timeline.

 btPlay.onPress = function():Void {   mAnimation.play(); }; btStop.onPress = function():Void {   mAnimation.stop(); }; var oKeyListener:Object = new Object(); oKeyListener.onKeyDown = function():Void {   if(Key.getCode() == new String("P").charCodeAt(0)) {     btPlay.onPress();   }   else if(Key.getCode() == new String("S").charCodeAt(0)) {     btStop.onPress();   } }; Key.addListener(oKeyListener);

After you've created keyboard alternatives, don't forget to expose them to assistive devices. Select each button in turn, and use the Accessibility panel to give the button a description and specify a keyboard shortcut. If Auto Label is active for the movie, don't specify a name for the button.

Listing a keyboard shortcut in the Accessibility panel does not create the shortcut: it merely announces that shortcut to screen readers. You still need to create the keyboard shortcut.

Problem

Solution

Discussion

See Also