United States Department of Veterans Affairs
VHA Office of Health Information

Creating Accessible Flash Course

Page 9 of 13

Creating Accessible Flash Course – Ensuring Keyboard Accessibility

Back Next

How to Make a Movie Clip Button Keyboard Accessible

Flash movies often include MovieClips that function as buttons. Making them keyboard accessible requires ActionScript.

Making the MovieClip Keyboard Accessible

  1. Start with a MovieClip with an associated AccessibilityProperties object.
  2. Put the control in the tab order. There are two ways to do this.
    1. If the MovieClip functions like a button and does not need to support child object accessibility, set the buttonMode property to true.
      mcStartButton.buttonMode = true;
    2. Otherwise, set tabEnabled = true.
      mcStartButton.tabEnabled = true;
  3. Add a MouseEvent.CLICK handler. This changes the role of the MovieClip to a button for screen reader users. It will also listen for Enter or space key presses correctly and accept activation programmatically from assistive technology (AT). Screen readers will trap these keys in Virtual cursor/Browse mode and will not send them through, so use the MouseEvent.CLICK event rather than a method associated with a key up or key down event handler.
    // assign mouse click event handler
    mc_StartButton.addEventListener(MouseEvent.CLICK,startCourse);
    // callback function associated with mouse click
    function startCourse(): void 
    {
      // start course, for example
      gotoAndPlay(2);
    }

Ensuring Keyboard Navigation between Actionable MovieClips and Components

Flash components (RadioButtons, CheckBoxes, DataGrids, etc.) use a different focus manager than standard Flash objects (MovieClips, simple buttons) to manage keyboard focus. When mixing MovieClips with components, Tab and Shift+Tab may not always correctly navigate between the two groups. Tabbing may just cycle among the components or among the MovieClips. TextInput controls appear to work well when combined with either group. Test your application. If focus does not move properly between MovieClips and components, use the solution below. It is not needed if focus moves correctly.

Screen capture from the New Employee Orientation with a question, a Skip button, three checkboxes and five more buttons: Help, Rewind, Pause, Play and Table of Contents.

The solution is to put components inside a dummy MovieClip with its tabChildren property set to true. Then ensure that all other MovieClips appear at the same depth as the dummy MovieClip: put each group of interlaced components or MovieClips into a dummy MovieClip as needed. For example, if your application contains groups of components followed by MovieClips and then a group of more components, you will need to create a dummy MovieClip for each group of components.

// import and enable accessibility
import fl.accessibility.CheckBoxAccImpl;
CheckBoxAccImpl.enableAccessibility();

// create instances for CheckBoxes
var chkBusinessDevelopment:CheckBox = new CheckBox();
chkBusinessDevelopment.label = "Business Development";
var chkFinance:CheckBox = new CheckBox();
chkFinance.label = "Finance";
var chkInformationTechnology:CheckBox = new CheckBox();
chkInformationTechnology.label = "Information Technology";

// create the dummy MovieClip
var dummy:MovieClip = new MovieClip();
// ensure that items in the dummy clip are tab-able
dummy.tabChildren=true;
// add the dummy to the stage
addChild(dummy);
// add the CheckBoxes to the dummy
dummy.addChild(chkBusinessDevelopment);
dummy.addChild(chkFinance);
dummy.addChild(chkInformationTechnology);
stop();

Checking Your Work

With the Keyboard Only or with a Screen Reader

To check keyboard accessibility of your MovieClip button and the ability to navigate to and from it if other components are used:

  1. If using a screen reader, such as JAWS or Window-Eyes, activate it and a compatible browser.
  2. Activate the Flash application.
  3. Tab to each actionable MovieClip button.
  4. Activate each actionable MovieClip button using space or Enter. (Testing this step with a screen reader will verify that the event listeners are correctly listening for a MouseEvent.CLICK event, not a KEY_UP or KEY_DOWN event.)
  5. Ensure the desired action occurs.
  6. Tab through the application to all components and MovieClips by pressing the Tab key.
  7. Shift+Tab (back tab) through the application to all components and MovieClips by pressing the Shift+Tab keystroke.
  8. Verify that all actionable items can be reached via the keyboard and that the keyboard focus does not get stuck just in components or just in MovieClips.

Select Next to learn how to add a shortcut key to this MovieClip button.

Glossary in new window Resources in new window   Back Next