FLASH22: Adding keyboard-accessible actions to static elements

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

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

Example 1: 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.

Note: 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".

Example Code:

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();
}

Related Techniques

Tests

Procedure

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

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

Expected Results

#1 and #2 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.