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
- Start with a MovieClip with an associated AccessibilityProperties object.
- Put the control in the tab order. There are two ways to do this.
- 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;
- Otherwise, set tabEnabled = true.
mcStartButton.tabEnabled = true;
- 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
// callback function associated with mouse click
function startCourse(): void
// start course, for example
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.
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
// 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
// add the dummy to the stage
// add the CheckBoxes to the dummy
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:
- If using a screen reader, such as JAWS or Window-Eyes, activate it and a compatible browser.
- Activate the Flash application.
- Tab to each actionable MovieClip button.
- 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.)
- Ensure the desired action occurs.
- Tab through the application to all components and MovieClips by pressing the Tab key.
- Shift+Tab (back tab) through the application to all components and MovieClips by pressing the Shift+Tab keystroke.
- 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.