Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

FLASH5: Combining adjacent image and text buttons for the same resource

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 avoid unnecessary duplication that occurs when adjacent text and iconic versions of a button are contained in a Flash movie.

Many kinds of buttons have both a text and iconic button adjacent to each other. Often the text and the icon button are rendered in separate buttons, in part to create a slight visual separation from each other. Although the sighted user can see this slight visual separation, a blind or low vision user may not be able to recognize the separation, and be confused by the redundant buttons. To avoid this, some authors omit specifying the accessible name for the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical button. The preferred method to address this is to put the text and image together in one button symbol instance, and provide a single accessible name for the button to eliminate duplication of text.

Examples

The following examples are for a situation where a button instance comprised of both an image and text is on the stage. The combined button in this example uses the instance name 'flashLink1'.

To create the combined button in Flash Professional:

  1. Add a graphic object and text to the stage

  2. Select both objects

  3. Select 'New Symbol' from the Insert menu or hit Ctrl+F8 to create a new button object

  4. Click on the button object on the stage and enter an instance name in the properties panel.

  5. Continue under example 1, 2, or 3 below.

screen shot showing the combined button with an instance name 'flashLink1'

Example 1: Using the accessibility panel to specify the accessible name

The accessibility panel is used to specify the accessible name (which in this case is the same as the visual text).

screen shot showing use of the accessibility control panel to provide a name for the combined button

Example 2:

ActionScript 3 can be used instead of the accessibility control panel to define the accessibility name for the combined button, as follows:

Example Code:

// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1.accessibilityProperties = new AccessibilityProperties();
flashLink1.accessibilityProperties.name = "Learn more about Flash";

ActionScript 2 can be used instead of the accessibility control panel to define the accessibility name for the combined button, as follows

Example Code:

// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1._accProps = new Object();
flashLink1._accProps.name = "Learn more about Flash";

Tests

Procedure

  1. Publish the SWF file

  2. Open the SWF file in Internet Explorer 6 or higher (using Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or higher)

  3. Use a tool which is capable of showing an object's name text alternative, such as aDesigner2 to open the Flash movie.

  4. If you are using aDesigner2, use the GUI Summary panel to check each image button in the Flash movie and ensure that there is no separate, redundant text control adjacent to the image that performs the same action.

Expected Results

All checks above 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.