Inside Technique : Improving Page Accessibility with TabIndex : Using the TabIndex Attribute

Before digging into TabIndex let's look at the four types of elements in your document:

Tabbable and Focusable	Tabbable elements can also receive the focus. These include your input elements (INPUT, TEXTAREA, etc) and hyperlinks.
Just Focusable	Focusable elements can receive the focus but are not apart of the tab order. This includes the document's body and TD elements. For the most part, focusable, but not tabbable elements are transparent to the user.
Neither Focusable or Tabbable	Focusable and tabbable elements are traditional behaviorless HTML elements. For example all block elements (except tables) and in-line formatting elements (eg., B, I, etc.)
Invisible	Invisible elements have no visual representation in your document. For example, HTML, HEAD, and SCRIPT elements fall into this category.

The TabIndex attribute controls both whether an element is tabbable and/or focusable. The TabIndex attribute takes a number. Depending on whether the number is positive or negative defines the element's behavior.

Setting the tabindex to a positive number defines where the element falls in the tab order (and can receive the focus). Defining the tabindex to -1 causes the element to be skipped in the tab order but allows the element to receive the focus. In both cases, setting the tabindex causes the element to fire both ONFOCUS and ONBLUR events. As you would expect, invisible elements can neither receive the focus nor be tabbed to.

When specifying the tab index on visible elements, the order is defined as follows:

• Elements with tabIndex=0 are ordered based on the source
• Any element with tabIndex>0 appears before all elements with tabIndex=0
• Any Elements with the same tabIndex are ordered based on the source order

When using TABINDEX you will most likely have to add a small script to process the enter key. The enter key should be treated the same as a mouse click on most focusable and tabbable items. For example, if you tab to a link on a web-page and hit enter, you will follow the link. If you tab through the first page to the outline demonstration and hit enter, you expect the outline to expand or collapse. On links the enter key is handled automatically but on most other elements (the non-input elements) hitting enter is just ignored. Fixing this is as easy as trapping the onkeypress event and adding a small event handler. Below is how we process the enter key in our outlining demonstration:

<STYLE>
  key {text-decoration: underline}
  #demo {cursor: hand}
</STYLE>
<SCRIPT>
function checkKey(el) {
	if (event.keyCode==13)
		el.click()
}
</SCRIPT>
<SPAN
  ACCESSKEY=A 
  TABINDEX=1 
  ONKEYPRESS="checkKey(this)"
  ONCLICK="disp(this)">
    <SPAN CLASS=key>A</SPAN>ppetizer
</SPAN>

We simply pass the element to the checkKey function. If enter is pressed then we call the click() method. This method causes the onclick event handler to execute thereby simulating the click.

In conclusion, the TABINDEX property improves not only your web-pages usability but also improves its accessibility. Unless you are writing a special purpose application (eg., some games) you should always strive to better idenfity any interactions with your content. A general rule of thumb would is to always specify a hand cursor (STYLE="cursor: hand") and a TABINDEX on all elements that are intended to be clicked upon.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.