TabIndex to Make Non-Focusable Elements Focusable

The TABINDEX attribute can not only be used to control the tab order of a page, but can also be used to make non-focusable elements focusable with the JavaScript .focus() method and place non-tabbable items into the tab order.

By default, only links and form fields are tabable from the keyboard.

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:

Focus by Tabbing
Element IE9 FF4
INPUT tabindex=”-1″ No No
INPUT tabindex=”" Yes Yes
INPUT tabindex=”0″
Yes Yes
INPUT no tabindex
Yes Yes
DIV tabindex=”-1″
No No
DIV tabindex=”"
No No
DIV tabindex=”0″
Yes Yes
DIV no tabindex
No No

Example 2:

Moving Focus with the JS focus() Method
Element IE9 FF4 Test
INPUT tabindex=”-1″ Yes Yes
INPUT tabindex=”" Yes Yes
INPUT tabindex=”0″ Yes Yes
INPUT no tabindex Yes Yes
DIV tabindex=”-1″
Yes Yes
DIV tabindex=”"
No Yes
DIV tabindex=”0″
Yes Yes
DIV no tabindex
No No

Standards:

  • None

Comments are closed.