Control Reading Order
Controlling the reading order of an Adobe 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, its contents can be difficult to understand. In 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 reading order jumps between letters in each row, resulting in the following order:
There are three strategies for controlling reading order.
- Keep the size of the movie small
- Controlling reading order using ActionScript
- Controlling reading order using offstage content
It is highly recommended that you use a screen reader to test the reading order from the start of development to avoid lengthy fixes later on once the movie is finished.
Limiting 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 generally 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 of controlling reading order is to use ActionScript. This method allows the designer to control the reading order using the .tabindex property in ActionScript. There is no distinction in ActionScript between reading order and tab order. However, when ActionScript is used to control the reading order of a Flash movie, all instances within the movie must be included in the 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 has implications for the font used in the application and potentially affects the overall file size. Learn more about handling font symbols in Flash.
Include offstage or obscured elements
The list of .tabindex values must include all instances over the life of the movie, including elements that are not visible and that sit offstage or are hidden under another instance. 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. Also, elements not visible at the start of the movie that will be visible later must be included in the list of .tabindex values.
Controlling reading order when loading SWF files at runtime
In cases where a series of child SWF files is loaded into a parent movie, the .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 file 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 for the screen reader 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 movie should be 4, 5, 6. These values need not be sequential, but they should be unique.
Using third-party repair and validation tools
A third-party tool from HiSoftware is available to help build a reading order with Flash content. Called AccRepair, this tool is sold as an extension to Flash. It looks for missing instance names, converts static text into dynamic text, and builds the reading order. This tool can be particularly helpful in cases where there are a large number of instances on stage. Get more information about AccRepair.
Controlling reading order using offstage content
In cases where the application relies on highly dynamic content, it can be difficult to specify the reading order in advance. In this very small set of applications, it is possible to control the reading order by placing a second set of content offstage in a single column. The onstage content is rendered as inaccessible to prevent the screen reader from reading it. The second set of content is positioned in a column so the reading order does not jump between unrelated elements.
There are two primary drawbacks to this method. First, it increases the number of objects in the movie, affecting the file size and performance of the movie. Second, users of screen magnifiers may find the offstage content conflicts with the onstage visual content with which they are working. Screen magnifiers not only increase the size of elements on the stage, but they move them to the center. If the onstage content is inaccessible, offstage content will draw the focus of the screen magnifier, creating a confusing visual experience. This method is often used in conjunction with screen reader detection, but it is important to consider that users may be using a screen reader and a magnifier simultaneously.
Screen reader detection
Since this case is intended to benefit screen reader users alone, this method is frequently used in conjunction with screen reader detection. Flash has a unique advantage over JavaScript in that it can use Microsoft Active Accessibility (MSAA) to detect the presence of a screen reader. The method Accessibility.isActive() will return a value of true if a screen reader is present and it is currently focused on the Flash content. It is important that this method not be called in the first second or so in the life of the movie, or it could return a false negative. Rather than calling this method in the first frame of a movie, many designers attach this method to the first button in the movie.
Building offstage content
If Accessibility.Active() returns a value of true, the contents onscreen are set to be inaccessible. Perhaps the easiest means of accomplishing this is to place all of the onstage content in a single movie clip and then set the .silent property of the clip to true. It is preferable to use .silent as opposed to altering the visibility of the movie clip since people relying on screen readers might be working with a sighted person who is visually relying on the onstage content.
Next, the offstage content is loaded into a single column. This column need not match the height of the movie. It is important that as changes are made onstage that offstage content is updated at the same time.
Test the Reading Order with JAWS
Click here to Try it out!!
Back to Top