Daniel Odievich
Microsoft Corporation

November 2000

Summary: This article offers practical tips for making Web pages more accessible, including accommodating users who are unable to use or have difficulty using a mouse. (5 printed pages)

Contents

Introduction
What's Wrong with the Mouse?
Definitions
Using Native HTML 3.2 Elements
Using the LABEL Object
Using the TITLE Attribute
Using DHTML Elements and Events
Example Application: Calculator

Introduction

In today's Web world, it is essential to provide clean and accessible Web applications for the exponentially increasing number of users who go online every day. By using the techniques described in this article, with minimal effort you will be able to make Web pages more accessible to people with disabilities.

Most of us remember times when a graphical user interface (GUI) operating system was just wishful thinking. The world was driven by text-based interfaces. Everything you wanted to do with a computer program could be done with a keyboard; and a mouse was an unwieldy two-kilogram device—more of a novelty than of any real use.

Things sure have changed since then. Almost every program allows you to click hyperlinks to connect to Web sites. DHTML allows unprecedented flexibility and richness in GUI applications. Things are looking good on the Net!

What's Wrong with the Mouse?

I am a die-hard "keyboarder." If there is a keyboard shortcut in Microsoft® Windows®, I know it. The only time I use the mouse is to play Half-Life or to navigate keyboard-unfriendly Web sites. It is my conscious choice not to use the mouse, but for millions of other people—including my mother, who has carpal tunnel syndrome—using the mouse is either painful or impossible. If you'd like these people to use your site, it is essential that you keyboard-enable your Web pages. In this article, I will explain how you can make this happen easily by using Internet Explorer and DHTML.

Definitions

The following terms will be used in this article:

Focus—position of the cursor on the Web page, indicated either by the cursor or by a light gray marquee.

tabIndex, tabOrder—order of focus movement between elements on the Web page when the TAB key is pressed. If two elements on the page have the same tabIndex, the element that occurs first in HTML source code will be the first recipient of the focus.

Access key—button that is pressed in combination with the ALT key. When the ALT+<access key> combination is received, the focus is moved to the element of the Web page that uses this access key.

Using Native HTML 3.2 Elements

You will save time and work if your site uses the standard HTML elements listed in the following table. These elements are "accessible" because users can access them by using the TAB key, without any modification to your Web page.

Table 1. Native HTML 3.2 elements that support accessibility

Other standard HTML elements can be made accessible by adding tabIndex and accessKey attributes to HTML tags.

Table 2. HTML elements that can be made accessible

Using the LABEL Object

HTML 4.0 specifications introduce the LABEL object, which you can use to associate text with any other HTML object or intrinsic control. Linked LABEL and HTML objects act identically when causing and receiving events, whether the user clicks the LABEL or the HTML object. To link the LABEL and HTML objects, set the FOR attribute of the LABEL equal to the ID attribute of the HTML object.

The following example associates the LABEL control with the text box. When the user clicks the LABEL control—or presses the ALT+T key combination—the LABEL control sets the focus to the text box:

<LABEL FOR="txtInputBox"><U>T</U>ype value:</LABEL>
<INPUT TYPE="text" ID="txtInputBox" NAME="txtInputBox" ACCESSKEY="t">

Using the TITLE Attribute

"Tool tips" are useful in making the UI more attractive for people with good vision and a mouse at their disposal, as well as for blind people. The TITLE attribute tag makes it very easy to teach a complex user interface, without cluttering the page with visible text. It can be used by screen-reading software to provide the same "tool tip" information that would appear when the mouse hovers over any DHTML object. This enables Web page navigation for the blind:

<LABEL FOR="txtInputBox" TITLE="Click ALT-T to set focus to very important 
   text box on the right"><U>T</U>ype value:</LABEL>
<INPUT TYPE="text" ID="txtInputBox" NAME="txtInputBox" ACCESSKEY="t" 
   TITLE="Type some very important value in this textbox">

Using DHTML Elements and Events

Of course, in today's Web world, it is difficult to build a good-looking application using only plain vanilla HTML 3.2 elements. DHTML is used in every interactive Web site in the world. Almost every DHTML element can be enabled for accessibility by using the tabIndex and accessKey attributes. Additional functionality can be gained with the use of DHTML keyboard events such as onkeypress, onkeyup, and onkeydown. The differences between these events can be seen in the following table. Table 3 illustrates how to use onkeypress, onkeyup, and onkeydown events together to process most of the user's input with a minimal amount of code.

Table 3. DHTML keyboard events

Example Application: Calculator

As a sample illustrating usage of the DHTML keyboard events just described, I wrote a Web calculator sample application. It is fully accessible via the keyboard through using a mix of the accessKey and tabIndex attributes, onkeyup, onkeypress, and onkeydown events, and the LABEL object. See Example 3: Calculator