Tabindex and Tab Order.

The TABINDEX attribute can be used to control the tab order of a page.

By default, only links and form fields are tabable from the keyboard. The tab order of this elements can be controlled by using the TABINDEX attribute.

Elements with a positive TABINDEX (tabindex=”10″) will receive the first tab stops on the page. The lowest positive number will receive the first tab stop, and each number in succession will then receive focus as the user tabs through the page. Once all the positive TABINDEX numbers have been tabbed to, the tab order will continue with all the tabbable elements that have no TABINDEX value.

TABINDEX can also be used to make a non-tabbable element like a DIV able to receive focus using the JavaScript .focus() method.

Example 1:

Using TABINDEX to set Tab Order (Note: By default, the comment text area below has tabindex=4 and the submit comment button has tabindex=5, they should be the first two tab stops on this page.
Field tabindex Tab Order
INPUT tabindex=”10″ tabindex=”10″ 1
INPUT tabindex=”20″ tabindex=”20″ 2
INPUT tabindex=”50″ tabindex=”50″ 5
INPUT tabindex=”40″ tabindex=”40″ 4
INPUT tabindex=”30″ tabindex=”30″ 3

Standards:

  • WCAG 2.0 SC 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

Comments are closed.