Inside Technique : Improving Page Accessibility with TabIndex
By Scott Isaacs

The early days of the web were simple. Page interactions were limited to Hyperlinks or simple input forms and pages had minimal formatting. With the correct tools, the information on the web could be accessed by almost anyone. For example, a blind person could use a screen reader to read and navigate through pages. As web designers appeared, pages became more complex and with the use of tables for layout the web became less accessible. CSS and HTML 4.0 are supposed to help fix this. However, a greater thread to widespread accessibility to web pages is the introduction of scripts and DHTML. You can now bury interactions on any element on you page.

Let's take a simple example - an expanding and collapsing outline. Most simple outlines work by clicking on an arbitrary tag that dynamically displays or hides contents. To help identify click-regions most better-designed pages will change the cursor when you are over the element. Now close your eyes - you can no longer see the cursor. How would know that those areas reveal more information. Even if you add an HTML TITLE how would a screen tool know that the content is relevant without forcing the entire page to be read. Many screen readers determine navigation and interaction based on whether the content is "active" such as links or input areas.

HTML 4.0 has an attribute that can go to great lengths to help improve a pages accessibility and define "active" areas - TabIndex. This property was first supported by Internet Explorer 4.0. However, it was only supported on the elements that could already be reached by the TAB key (eg., links and input controls). This was mostly to allow authors to define the order the tabkey moves through the document. Internet Explorer 5.0 extends this support to almost every element on your web-page. Using the TABINDEX attribute we can make our simple outline example much more accessible. With Internet Explorer 5.0, try tabbing through this document. Eventually you will start tabbing through the three menu items below. Hitting the enter key will expand and collapse the items:

• Appetizer
  • Salad
  • Soup
• Dinner
  • Steak
  • Chicken
  • Pizza
• Drinks
  • Soda
  • Water
  • Lemonade

In the above example we turned simple SPAN elements into tabbable items by specifying a TABINDEX. The TABINDEX defines where the element falls in the document's tab order. An alternative (that works in more browsers) would be to use links (A HREF="#" ONCLICK="...") wherever you are creating a clickable region and modifying the style. However, depending on what you are building you may not have that option (eg., turning an entire block of content into a tabbable area).

In addition to TABINDEX - all elements can also have an ACCESSKEY specified. In our example above we underline different keys (IE5 Only). Holding the alt-key and typing the underlined letter moves the focus to that element - hitting enter will expand or collapse the item. (note - sometimes the focus "rectangle" is not displaying correctly but the focus is moving to the elements)

Next we are going to explain how to use the TabIndex attribute.

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