Tabindex Focus Navigation Tests

Experiments with "tabindex"

Both the W3C ARIA and the HTML 5 draft specifications define an improvement to navigating an HTML document using the TAB key. This is accomplished by, first, allowing all elements to have a tabindex attribute, and, secondly, two new intrepretations of the tabindex values of '0' and '-1'.

A tabindex with a value of '-1' means that one cannot transfer keyboard focus to the element via a TAB key press. In this case, the element can acquire keyboard focus, but only programmatically via a call to focus().

A value of '0' means that the element acquires focus via a TAB key press after all other elements whose tabindex is greater than zero have been tabbed to.

There is a page in fluid's svn repository that allows one to test various browsers according to the these tabindex rules. It contains a variety of elements with various tabindex values. Press the TAB key to see how your browser navigates among them.

The tabindex test page in question can be found in the fluid source code repository at the following URL:!svn/bc/10485/scratchpad/tabindex/trunk/BrowserTabindexDemo.html

Steps for testing with "TabindexTests.html"

The following describes a quick way of trying out the tabindex tests in "TabindexTests.html".

  1. Go to!svn/bc/10485/scratchpad/tabindex/trunk/BrowserTabindexDemo.htmll
  2. Choose "Save as..." from the browser's "File" menu.
  3. Save the file.
  4. Load the file into the browser from its local saved location.
  5. Navigate the various elements using the TAB key, and watch the reports regarding "focus" and "blur" events.

Alternatively, one can use svn to check out the file, and then load it into a browser.