«
»

TabIndex to Make Non-Focusable Elements Focusable

Jun 22nd, 2011 at 10:19 am

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

In Accessibility, Best Practices, WCAG. Both comments and pings are currently closed.

Comments are closed.