Labels and Keyboard Shortcuts

Internet Explorer 4.0 supports HTML 4.0. Two new attributes in HTML 4.0 are 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. You may wish to cut and paste them into an HTML document to observe the behavior.

Example 1: Associating a label with a checkbox

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

<LABEL FOR="chkInfo">Check to receive mailing</LABEL>
<INPUT TYPE="CHECKBOX" ID="chkInfo" VALUE="SendMailing">

Example 2: Associating a shortcut key with a link

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

<LABEL FOR="txtName" ACCESSKEY="N">
<U>N</U>ame:</LABEL>
<INPUT TYPE="TEXT" ID="txtName" SIZE=30>

Browsers that don't support these form enhancements ignore them gracefully.