Controlling the reading order of an movie created with Adobe Animate CC software is perhaps the single most important and challenging aspect of accessible design. The default reading order of such a 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 an 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. 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 offstage 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. This can facilitate understanding when a problem has been introduced and how to rectify the issue. It is significantly more work to modify the reading order of a movie once it has been completed.

There are at least three means of controlling reading order:


Limiting the size of the stage

A small 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 movie, all instances within the movie must be included in the list of .tabindex values, including all text fields and decorative elements.

Include an instance name with every instance over the life of the movie
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 Animate CC.

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.

Control 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 and 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. 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.

 


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 file size and movie performance. 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 also 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. Animate CC 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 content created with Flash. 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.