[Skip to Contents]

Facilitate keyboard access

Tab index :

Navigation links and input forms need to be accessible via the keyboard for users who are unable to use a mouse. By using the TAB key it should be possible to jump from link to link and form field to field in a logical order. If this is not the case the tab order can be specified by adding the TABINDEX attribute to an anchor or form field tag:

<a tabindex="1" href="home.html">Home</a>
<a tabindex="2" href="about.html">About us</a>

Access key :

Often occuring links and form input fields can also be made accessible via the keyboard by using the ACCESSKEY attribute. A key on the keyboard is allocated for quick access to a link. The ALT key (CMD on the Macintosh) on the keyboard is held down while the specified key is pressed.

Choosing an accesskey can, however, be problematic, because many key combinations already have functions. ALT+H, for example, brings up the Help menu. However, in some browsers this is overridden. The question is whether it is just a good idea to override access to the browser's help function.

ACCESSKEY is only supported by the latest browsers.

Example:

Typing the access key in this example will take the user to another web page, i.e. the contact details page:

<a accesskey="c" href="contact.html">Contact Details</a>

It is also useful in forms, where typing the access key will put the focus into the according field:

<form action="..." method="post">
<label for="username" accesskey="u">User Name:</label>
<input type="text">
</form>

Letting the user know:

Example 1:

...<strong>U</strong>ser Name:...

Example 2:

Contact Details (ALT + C)

<a accesskey="c" href="contact.html">Contact Details</a> (ALT + C)

[Links to more on this subject can be found in the resources section.]

Skipping repetitive information

| Access Guide Home | Table of Contents | Definitions | Glossary |