Best Practices for Accessible Flash Design: Part 1 | 4
Best Practices for Accessible Flash Design: Part 1
Case 3: Text equivalents for a single movie clip or button
If a text equivalent is assigned for a single object in a movie, this can be done via the Accessibility panel. The text equivalent should be relatively short and should address the function of the object, rather than a longer or more detailed description. This will help prevent the movie from becoming verbose and tedious to navigate.
The description field can be used for longer descriptions. However, JAWS and Window Eyes will both read this field by default. As a result, there is no advantage to using this field at this time.
Control Reading Order
Controlling the reading order of a Flash movie is perhaps the single most important and challenging aspect of accessible Flash design. The default reading order of a Flash movie does not follow a predictable left to right, top to bottom order. As a result, contents of a Flash movie can be difficult to understand. Take the example below. Based on the visual presentation of the alphabet in three rows, it would be natural to expect the reading order to follow alphabetical order.
However, the actual reader order jumps between letters in each row. The resulting order is shown below.
There are three strategies for controlling reading order. The simplest is to keep the physical size of the movie small. The second strategy requires controlling the reading order using ActionScript. A third strategy places a duplicate version of content off-stage in a single column.
It is very important that the reading order of a movie be tested from the beginning of the development process using a screen reader. It is significantly more work to modify the reading order of a Flash movie once the movie has been completed. Therefore using a screen reader to evaluate the reading order as the movie is developed can facilitate understanding when a problem has been introduced and how to rectify the issue.
Limit the size of the stage
A small Flash movie that is less than 300 pixels wide and consists of a single column or a single row of objects does not require any specific control over the reading order. Examples might include small animations or applications that pop up in a separate window, a navigation bar that consists of a single row or an application that consists of a single column.
Controlling reading order using ActionScript
The most precise means for controlling reading order is to use ActionScript. This method allows the designer to precisely control the reading order using the
.tabindex property in ActionScript. There is no distinction in ActionScript between reading order and tab order. However, when using ActionScript to control the reading order of a Flash movie, all instances within the movie must be included in that list of
.tabindex values, including all text fields and decorative elements.
Every instance over the life of the movie requires an instance name
In controlling the reading order, it is important to ensure that every instance on the stage has an instance name. This includes all text,
movie clip and button symbols as well as all components over the life of the movie. Do not use static text
Since it is not possible to provide an instance name to static text objects, a single instance of static text will result in the entire reading order reverting to the default. Controlling the reading order using ActionScript requires the use of dynamic text fields. This will have implications for the font used in the application and potentially impact the overall file size. To learn more about handling font symbols in Flash, please visit:
Include off-stage or obscured elements
The list of
.tabindex values must include all instances over the life of the movie, this includes elements that are not visible and sit off stage or hidden under another instance. It is important that if these elements should be obscured from a screen reader user, the
._visible property should be set to false or the
.silent property should be set to true. This also means that elements that are not visible at the start of the movie, but will be visible later must also be included in the list of
Controlling reading order when loading swfs at runtime
In cases where a series of child .
swf files are loaded into a parent movie, the list of
.tabindex values must be listed in the child movie clip.
However, it is important that the values list in the reading order of each child swf be unique. For example, if two child movies loaded into a parent movie each have three elements with .tabindex values of 1, 2 and 3, the screen reader will read the first value of the first movie loaded, then the first value of the second movie loaded. Next, the screen reader will read the second value of the first movie clip loaded and then the second value of the second movie clip loaded and so on. In order to read the contents of the first movie followed by the contents of the second movie, the list of
.tabindex values for the first movie should be 1, 2, 3 while the list of values for the second move should be 4, 5, 6. These values need not be sequential, but they should be unique.
Using 3rd party repair and validation tools
As of this writing, there is one third party tool from HiSoftware available to help build a reading order with Flash content. Called, ACCRepair, this tool is sold as an extension to Flash. It will look for missing instance names, convert static text into dynamic text and build the reading order. This tool can be particularly helpful in cases where there are a large number of instances on stage. For more information about ACCRepair, see:
About the Author
Bob Regan is a solutions architect for vertical markets at Adobe Systems, Inc., serving as the technical lead for the Education, Government, Financial Services, Manufacturing, Telecommunications and Life Science markets. Bob is also an accessibility advocate with Adobe where he looks at accessibility issues from product design, engineering and content authoring through to the end user.
Created: March 27, 2003
Revised: July 29, 2006