Labels and Keyboard Shortcuts

Two new attributes introduced in HTML 4.0 were LABEL and ACCESSKEY. They are used to improve usability and accessibility by associating a keyboard shortcut or a label with the element. When the users clicks on the LABEL, the click event is passed on to the associated element. ACCESSKEY can be used either directly on an element or in conjunction with a LABEL.

The examples below illustrate this further.

Example 1: Associating a label with a checkbox

In this example, clicking the text "Check to receive mailing" will toggle the checkbox.

Check to receive mailing

Code:

<label for="chkInfo">Check to receive mailing</label>
 <input type="checkbox" ID="chkInfo" value="SendMailing">

Example 2: Associating a shortcut key with a link

Click here or press Alt-I for Instant Ordering

Code:

<a href="go.htm" accesskey="I">
  Click here or press Alt-I for Instant Ordering</A>

Example 3: Associating a label and shortcut key with a text box

In this example, the underlined N gives a visual cue that N is the access key, which will give the <INPUT> focus. Users familiar with accessibility standards in traditional Windows applications will recognize this convention.

Name:

Code:

<label for="txtName" accesskey="N">
<U>N</U>ame:</LABEL>
<input type="text" id="txtName" size="30">

Keyboard Shortcuts HTML HTML 4.0 Accesskey Label html accesskey keyboard shorcuts