Using the tabIndex property to specify a logical reading order and a logical tab order in Flash

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Note

Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, and encourages authors interested in creating accessible web content to use HTML.

This technique relates to:

Description

The objective of this technique is to control the Flash Movie's reading order and tab order by assigning tabIndex values to its elements.

The tab order is the order in which objects receive input focus when users press the Tab key. The tab order does not necessarily contain the same elements as the reading order does, as the reading order can also contain elements that are not focusable. However, both the reading order and tab order can be controlled using tab index values.

Flash Player uses a default tab index order from left to right and top to bottom.

To create a custom reading order, assign a tab index value to every instance on the stage, either through ActionScript or through the Accessibility panel. Create a tabIndex value for every accessible object, not just the focusable objects. For example, dynamic text must have tab indexes, even though a user cannot tab to dynamic text.

You can create a custom tab-order index in the Accessibility panel for keyboard navigation for the following objects:

Tab focus occurs in numerical order, starting from the lowest index number. After tab focus reaches the highest tab index, focus returns to the lowest index number. When you move tab-indexed objects that are user-defined in your document, or to another document, Flash retains the index attributes. Check for and resolve index conflicts (for example, two different objects on the Stage with the same tab-index number). If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.

To add a tabIndex value using the Accessibility panel, perform the following steps for every accessible object on the stage:

  1. Select the element by clicking on it.
  2. In the Accessibility panel, enter a numeric value in the "Tab index" field. The value must be a positive integer (up to 65535) that reflects the order in which the selected object should be read. Elements with higher tab index values will be read after elements with lower values. If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.
  3. To visualize the currently defined tab order, select View > Show Tab Order. Tab index numbers for individual objects appear in the upper-left corner of the object.
Note

You can also use ActionScript code to create a tab-order index for keyboard navigation.

These steps are illustrated in the screenshots below

Figure 1visualizing the tab order
Figure 2Setting a tab index value in the Accessibility panel
Note

Flash Player no longer requires that you add all of the objects in a FLA file to a list of tab index values. Even if you do not specify a tab index for all objects, a screen reader reads each object correctly.

Examples

Example 1: Using tabIndex to navigate a column structure

This example contains dynamic TextField instances that are grouped into columns. To ensure the reading order follows the column structure. The TextField instances are given a tab index value that corresponds to their textual content (for example, the TextField containing the text "Sample Text 3" has a tabindex value of 3. Additionally, a single TextField is added that has no tabindex value set. This field contains the text "Not in tab order". Even though this field is visually placed between sample text 2 and 3, it is placed at the end of the custom tab order because it is not assigned a tabindex value.

The results can be found in the working version of Using tabindex to navigate a column structure. The source of Using tabindex to navigate a column structure is available.

Example 2: Controlling tab order in a two-column layout

This example contains a Flash based form that is laid out over two columns. To make the tab order follow the column structure, each form control is assigned a tab index value in the Accessibility panel.

The results are shown in the working version of Controlling tab order in a two-column layout. The source of Controlling tab order in a two-column layout is available.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Use a screen reader to navigate through the Flash movie, one element at a time.
  2. Check that the order in which the screen reader announces the content, matches the logical visual order.
  3. When focus has been placed inside the Flash movie, press the Tab key repeatedly to traverse its contents by keyboard.
  4. Verify that all interactive and focusable elements are reachable by keyboard, in a logical order.

Expected Results

  • Checks #2 and #4 are true.