Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

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

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for Flash for general information on user agent support.

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

Tests

Procedure

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

  1. Check that the button's label text correctly describes the button's purpose

  2. If a button does not have a text label, confirm that descriptive text has been added as the button's accessible name.

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