# Adding keyboard-accessible actions to static elements

ID: FLASH22

Technology: flash

Type: Technique

## When to Use

- Adobe Flash Professional version MX and higher
- Adobe Flex

## Description

The objective of this technique is to demonstrate how to provide keyboard access to a Flash MovieClip that is not keyboard accessible by default. This technique ensures that the element is focusable by setting the `tabEnabled` property, and it ensures that the action can be triggered from the keyboard by providing a keydown handler in addition to a click handler.

## Examples

### MovieClip used as a button

In this example, a custom MovieClip is used as a button. To make it keyboard accessible, the MovieClip is placed in the tab order using the tabEnabled. Additionally, redundant event handlers are added so that the custom button responds to both a mouse click and a space bar keypress. Finally, the custom button is provided an accessible name using the MovieClip's `AccessibilityProperties` object. This makes the button's label perceivable by assistive technology.

This result can be viewed in the working version of MovieClip used as a button. The source of MovieClip used as a button is available.

Using a generic MovieClip is generally not recommended, since the custom button will be perceived as a focusable graphic rather than a button. Instead, a better approach would be to use the standard Flash Button component, or create a new symbol with a type of "button".

    import flash.accessibility. *
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.net.navigateToURL;
    import flash.net.URLRequest;

    testMC.tabEnabled = true;
    updateAccName(testMC);
    testMC.addEventListener(MouseEvent.CLICK, clickHandler, false);
    testMC.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

    updateAccName(testMC);

    function clickHandler(e) {
      testMC.labelText.text = "THANKS";
      updateAccName(testMC);
    }

    function keyDownHandler(e) {
      if (e.keyCode == 32)
      clickHandler(e);
    }

    function updateAccName(mc: MovieClip) {
      if (! mc.accessibilityProperties)
      mc.accessibilityProperties = new AccessibilityProperties();
      mc.accessibilityProperties.name = mc.labelText.text;
      Accessibility.updateProperties();
    }

## Tests

### Procedure

When a Flash Movie contains generic MovieClip instances that are used as interactive controls, confirm that:

1. The MovieClip instance has its `tabEnabled` property set to true
2. The MovieClip instance has event handlers for both mouse and keyboard events

### Expected Results

- #1 and #2 are true

## Related Techniques

- SCR29
- FLASH17