Best Practices for Accessible Flash Design: Part 1 | 3
Best Practices for Accessible Flash Design: Part 1
Accessibility Best Practices
The following comprises a list of best practices for accessible design. This list is not intended to be fixed nor comprehensive. It is up to designers to make decisions about individual applications and whether they meet the requirements outlined in the use cases.
Provide Text Equivalents
Screen readers are not able to discern the meaning of graphic or animated elements on the stage. As a result, designers must provide a brief text description of graphic elements. Text equivalents can be provided for an either an entire movie, a single object within a movie or a group of objects within a movie.
Providing text equivalents for an entire movie
Text equivalents should be provided for an entire movie in cases where the movie can be conveyed using a single text equivalent. Examples of this include movies that show a simple animation, banner ads or complex movies that cannot otherwise be made accessible.
The text equivalent should be placed in the name field. It is generally advisable to make the contents of the name field short and focused in order to describe the function of the movie. The description field can be used for longer descriptions. However, both JAWS and Window Eyes read this content by default. As a result, long descriptions used in this field can result in an application or page that is tedious to listen to. In cases where a single text equivalent is used for an entire movie, the child objects of the movie should be made inaccessible. This will prevent animations within the move from causing frequent updates to the screen reader. It will also facilitate automated testing of the content for accessibility.
The text equivalent may be assigned using the accessibility panel. In this screen shot below, a text equivalent is placed in the name field, "Animation of moon orbiting a planet."
To provide a text equivalent using ActionScript, a new object must be created for each instance and then the accessibility information assigned. Once the name value has been assigned, the accessibility objects must be updated. This is done once for all objects when a change is made. It is not necessary to update each instance of the object. Notice the sample code below includes a line to create the new object for the entire movie. Next, the value is assigned for the
.name property and then the child objects are made inaccessible using the
.forcesimple property. A complete list of the ActionScript properties is shown below with the corresponding fields on the accessibility panel.
The following is a list of accessibility properties in ActionScript.
Providing text equivalents for single movie clip
Unlike HTML, not every movie clip or button in a Flash movie requires a text equivalent. There are at least three cases that need to be considered here.
Case 1: Setting a movie clip to be silent
First, there are elements that are purely decorative, are repetitive or convey no content. These movie clips should be made inaccessible. This can be done using the Accessibility panel by deselecting the option, "Make Accessible."
This same property can be set using ActionScript. The following code example shows an object set to be inaccessible using the .silent property.
Case 2: Labels for buttons and controls
Flash includes an option called "auto-labeling." If a text object is used within a button or a movie clip used as a button, the Flash player will assume that text object is the text equivalent for that button. It is important in these cases that the child objects of the movie clip are accessible. It is important to keep in mind that only a single text object can be used as a label and the text object must fit completely within the hit area of the button.
Auto-labeling also works for components such as radio buttons and list boxes used in a movie. The Flash player will assume text objects above or to the left of the control should be used as the label. Again, only a single text object will be used as a label. If a text equivalent is assigned via the name property using either the Accessibility panel or ActionScript, that value will over ride the auto-labeling without disabling the auto-labeling completely. Auto-labeling can only be turn off on the accessibility panel and it can not be changed once it is set.
The screen shot below shows the auto-labeling option enabled.
Created: March 27, 2003
Revised: September 29, 2004
Revised: July 29, 2006