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

Applicability

Note

Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, and encourages authors interested in creating accessible web content to use HTML.

This technique relates to Success Criterion 2.1.1: Keyboard (Sufficient as a way to meet FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap).

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

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