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:
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:
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