Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

FLASH37: Using the tabIndex property to specify a logical tab order in Flash

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for Flash for general information on user agent support.

Description

The objective of this technique is to control the Flash Movie's tab order by assigning tabIndex values to its keyboard focusable 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.

The default tab order assigned by the Flash player follows a left to right, top to bottom pattern. You can create a custom tab-order index in the Accessibility panel for keyboard navigation for the following objects:

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

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 focusable 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 placed when tabbing through the Flash content. Elements with higher tab index values will be reached after elements with lower values.

  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.

These steps are illustrated in the screenshots below:

visualizing the tab order

Setting a tab index value in the Accessibility Panel

Note: Flash Player 7 and newer does not require that you provide a tabindex value for each of object in a FLA file. Even if you do not specify a tabindex for some objects, those objects will be in the tab order. Objects that do not have a tabindex defined will have a very high tabindex value determined automatically, which tends to place such objects at the end of the tab order.

Examples

Example 1: 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. When focus has been placed inside the Flash movie, press the tab order repeatedly to traverse its contents by keyboard.

  2. Verify that all interactive and focusable elements are reachable by keyboard, in a logical order.

Expected Results

All interactive and focusable elements are reachable by keyboard, in a logical order.