DEMOS Project - Accessibility Guide: Keyboard input

Facilitate keyboard input: Tab index & Access key

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 access key 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 access key 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.

Access key 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:

User Name:

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

Letting the user know:

Example 1

User Name:

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

Example 2

Contact Details (ALT + C)

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

A list of access keys used on the DEMOS site can be found on the Help page.

More detail on the subject can be found here: Improving accessibility with accesskey in HTML forms and links

| Previous || Table of Contents || Next |