Accessibility

« Reading Order in Flash | Main | Accessible Product Rollover »

May 11, 2003

Flash Reading Order Cases

Here is a list of cases I made for myself soon after Flash MX was released. This list has been very helpful for me over the last year.

The bottom line is that all instances of objects must be accounted for in the tabindex list. If one instance is missing from the list, the entire reading order reverts to the default.

Basic cases

Case 1

Example | Source
Three pieces of static text on the stage. Red from left to right, “Red, Green, Blue”. No ActionScript is defined.

Case 2

Example | Source
Three pieces of dynamic text on the stage. Each has an instance name specified. The tab order is specified using ActionScript to read from right to left, “Blue, Green, Red”.

_root.blue_txt.tabindex = 1;
_root.green_txt.tabindex = 2;
_root.red_txt.tabindex = 3;

Impact of movie clips and graphic symbols

Case 3

Example | Source
This is the same as case two, but with a circle drawn on the stage. This does not affect the reading order.

Case 4

Example | Source
This is the same as case three, but the circle has now been saved as a graphic symbol. This does not affect the reading order.

Case 5

Example | Source
This is the same as case 3, but this time the circle has been saved as a movie clip symbol. No instance name is specified and the symbol is left out of the tab order in the ActionScript. This disrupts the reading order of the Flash content. The reading order now reverts to the default order reading, “Red, Green, Blue”.

Impact of static text symbols

Case 6

Example | Source
This is the same as case two. This time, a piece of static text is placed on the stage. This disrupts the reading order. The reading order now reverts to the default order reading, “Red, Green, Blue, Yellow”.

Listing nested objects

Case 7

Example | Source
This is the same as case six. This time, the static text element is saved as a movie clip, given an instance name and the movie clip is placed in the tab order. The reading order reverts to the default.

_root.blue_txt.tabindex = 1;
_root.green_txt.tabindex = 2;
_root.red_txt.tabindex = 3;
_root.yellow_mc.tabindex = 4;
 

Case 8

Example | Source
This is the same as case seven. This time, the text in the movie clip is dynamic. It is given an instance name and added to the tab order. The reading order works just fine. One thing I think is interesting to note here is that I do not have to specify the movie clip as a separate element.

_root.blue_txt.tabindex = 1;
_root.green_txt.tabindex = 2;
_root.red_txt.tabindex = 3;
_root.yellow_mc.yellow_txt.tabindex = 4;
 

Case 9

Example | Source
This case is the same as case two with a circle with two pieces of text on it. The circle and the two additional text elements are grouped as a movie clip. All are given an instance name and the text elements are added to the tab order. The order is read as specified.

_root.circle_mc.b_txt.tabindex = 1;
_root.circle_mc.a_txt.tabindex = 2;
_root.blue_txt.tabindex = 3;
_root.green_txt.tabindex = 4;
_root.red_txt.tabindex = 5;
 

Case 10

Example | Source
This is the same as case 9 with the visibility of the b text instance set to false. The letter is not read. The remaining instances are read in the order specified.

_root.circle_mc.b_txt.tabindex = 1;
_root.circle_mc.a_txt.tabindex = 2;
_root.blue_txt.tabindex = 3;
_root.green_txt.tabindex = 4;
_root.red_txt.tabindex = 5;
_root.circle_mc.b_txt._visible = false;
 

Case 11

Example | Source
This is the same as case 10. This time the b text instance .silent property is set to true. This instance is visible, but it is also read. The other instances are read in the order specified.

_root.circle_mc.b_txt.tabindex = 1;
_root.circle_mc.a_txt.tabindex = 2;
_root.blue_txt.tabindex = 3;
_root.green_txt.tabindex = 4;
_root.red_txt.tabindex = 5;

Posted by Bob Regan at May 11, 2003 10:21 PM

Comments

Posted by: prasanna at April 24, 2004 06:24 AM

Posted by: Pete at November 9, 2004 05:39 AM

Posted by: Nancy F. Reese at January 3, 2005 12:32 PM