When I recently entered form data on a Web site, I filled in
one field and hit [Tab] to move to the next field; I was surprised when I
looked up to see that the cursor was in another field further down the page. I
used the mouse to move to the appropriate field, but it wasn’t long before
[Tab] was causing problems again. This predicament led me to wonder about the
page design and how the tabIndex attribute can aid navigation via a keyboard.

Accessing elements via [Tab]

The HTML DOM tabIndex property allows you to set or return
the tab order for an HTML element. This property was first supported with
Internet Explorer 4.0. Initially, only elements that were actually accessible
via [Tab] were supported such as input fields, links, etc. Today, its support
has spread to most Web browsers and to all elements displayed on a page. You
can double-check the HTML specification
to ensure an element supports the property before you use it.

The tabIndex property

It’s a simple and straightforward process to use the
tabIndex property. For example, the following HTML source assigns a tabIndex of
1 to the input field—it is the first field in the tab order:

<input id="idfname" name="firstName" tabindex="1" />

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

A Web page with this input field will move the cursor to the
firstName field when/if [Tab] is initially selected.

There are a few issues to keep in mind when assigning the
tabIndex property. The following list outlines rules for assigning numerical
values:

  • Elements
    with tabIndex of zero are ordered based on the source (or default page
    behavior).
  • A
    tabIndex value greater than zero sets their tab order. All elements with a
    positive tabIndex value will appear (receive focus from [Tab]) before all
    elements with zero tabIndex.
  • If
    you make a mistake and assign the same tabIndex to multiple elements, they
    are treated like their counterparts with a zero tabIndex.
  • Assigning
    a tabIndex a value of negative one (-1) causes the element to be skipped
    when [Tab] is used. Note: The
    onfocus and onblur events are still fired if negative one (-1) is used.
  • The
    value of tabIndex can be any number between 0 and 32767.

The sample HTML in
Listing A assigns a tabIndex value to each item on the page. The input fields and div tags include tabIndex properties to
allow the user to peruse the page elements with the keyboard. (The div tags
don’t offer much in terms of gaining focus, but I wanted to demonstrate the
application of tabIndex on non-input elements.) The buttons have values of
negative one (-1) assigned, so they are skipped when you utilize [Tab].

You can add a little JavaScript to introduce automatic
tabbing when an input element is full (maximum length reached). The function is basic, but let’s take a quick look at how it
works:

function checkLen(x,y) {

if (y.length==x.maxLength) {

var next=x.tabIndex

if (next < document.getElementById("frmTest").length) {

document.getElementById("frmTest").elements[next-1].focus()

} } }

The function accepts two variables. The first variable is
the field with the second containing the field’s value. The field’s length is
compared to the acceptable maximum length. If they are equal (i.e., the field
is full), the tabIndex value is read from the field. If the value is less than
the length of the form, then the focus is moved to the next field.

The function is assigned to each field’s onkeyup event, so
it is called each time a value is entered in the field to check whether the
maximum length has been reached. If the end has been reached, the cursor is
moved to the next field in the tab order. The source in Listing B adds the function to the previous example.

Enhance accessibility

Specifying a tabIndex for elements makes a Web interface
easier to use for those of us who often stick to the keyboard; it also benefits
non-standard clients, which may include PDAs, cell phones, and screen readers
for those with disabilities. Anything that extends an application’s reach is
good.

It’s the little things

You may spend countless hours laying out a Web form and
ensuring it is visually appealing and correctly processed by backend server
components. However, you may overlook testing it with non-standard techniques
or browsers. A good example is forgoing a mouse and relying on the keyboard to
navigate the form. The HTML standard includes the tabIndex property, which
allows you to control how items are accessed via [Tab].

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.