FLASH27: Providing button labels that describe the purpose of a button

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 describe the purpose of a button by providing descriptive text as the button's accessible name. The description lets a user distinguish this button from other buttons in the Flash movie and helps the user determine whether to activate the button. An empty string is not sufficient as a button's accessible name.

For buttons with text labels, the label text will be used as a buttons accessible name. If a button is image based and does not have a text label, the button's accessible name will have to be set separately using the Accessibility panel or through scripting.

Examples

Example 1: Using the label property to describe the button's purpose

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;

ButtonAccImpl.enableAccessibility();

var myButton:Button = new Button();
myButton.label = "View Items in Cart";

Example 2: Using scripting to set the accessible name for an image button using Actionscript 3.0

In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.

Example Code:

import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import flash.accessibility.*;
import flash.system.Capabilities;
ButtonAccImpl.enableAccessibility();

var soundIsMuted = false;
var myButton:Button = new Button();
myButton.setStyle("icon", unmuted);
myButton.label = "";
myButton.x = myButton.y = 10;
myButton.width = myButton.height = 50;
updateAccName(myButton, "mute sound");
myButton.setStyle("icon", unmuted);
myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
addChild(myButton);

function handleBtnClick(e) {
  soundIsMuted = !soundIsMuted;
  myButton.setStyle("icon", soundIsMuted ? muted : unmuted);
  updateAccName(myButton, soundIsMuted ? "unmute sound" : "mute sound");
}

function updateAccName(obj, newName:String) {
  if (!obj.accessibilityProperties)
    obj.accessibilityProperties = new AccessibilityProperties();
  obj.accessibilityProperties.name = newName;
  if (Capabilities.hasAccessibility)
    Accessibility.updateProperties();
}

Related Techniques

Tests

Procedure

For each button in the Flash movie that uses this technique:

Check that the button's label text correctly describes the button's purpose
If a button does not have a text label, confirm that descriptive text has been added as the button's accessible name.
If a button contains both label text and an accessible name, confirm that the combination of the two makes sense as a description for the button's purpose.

Expected Results

Checks #1, #2, and #3 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.