HTML Unleashed PRE. Creating Widely Accessible Web Pages: Forms and Links

The LABEL, FIELDSET, and LEGEND Elements

The new LABEL element serves to associate a piece of content within a form with one of the form controls.  As such, it supplies the functionality that HTML forms used to lack compared to, say, Windows dialog boxes where you can click on the text string next to a radio button to switch it on or off.  Now, if you mark a piece of text or other content as a LABEL for a form control, this label will pass the focus it is given (by mouse, keyboard, or other means) onto its corresponding control.

Therefore, the accessibility importance of the LABEL element is that it provides a sort of "alt text" for the control it's associated with.  The INPUT element (but not the other form controls) may also have an alt attribute of its own; however, it is desirable that the same label value be accessible to all users of the form, not only to those using speech access or form-incapable browsers (who are supposed to be presented the alt string of an INPUT element).

What is performed by LABEL for stand-alone controls, the FIELDSET and LEGEND elements can do for a group of controls.  By enclosing a number of controls within a form into a FIELDSET, you're integrating them into a group that, in some respects, is treated as a whole.  The LEGEND element, which is the obligatory first element within a FIELDSET, surrounds a piece of text that serves as a label for the entire group.

Keyboard Navigation

The keyboard being a much more disability-tolerant input device than the mouse, it is important, first, that all users have convenient means of keyboard navigation through the "hot spots" on the page, and second, that web authors be able to redefine access sequences for their pages for maximum efficiency.  These "hot spots" include form input controls and hypertext links.  Note that with focus on a link, you still have to issue some additional command (e.g. to press the Enter key) to activate it.

The two keyboard access modes provided by HTML 4.0 are access keys, or shortcuts, and tabbing order.  Access keys are defined as characters that, when pressed on the keyboard along with a certain modifier key (Alt on Windows systems, Cmd on Macs), move focus onto the element associated with this access key.  Tabbing order defines the order in which the elements receive focus when a certain "tabbing" key (usually the Tab key) is pressed repeatedly.

HTML elements differ in which keyboard access modes can be used with them.  Setting the tabbing order position is available for the four input controls (INPUT, SELECT, TEXTAREA, and BUTTON) as well as for the A, AREA, and OBJECT elements.  Access keys, on the other hand, can be assigned only to LABELs, LEGENDs, and A elements.

Thus, you can use shortcuts to switch to LABELed controls, groups of controls enclosed into FIELDSET elements, and stand-alone links, while tabbing will work for all form controls (it doesn't matter whether they're associated with LABELs or FIELDSETs or not) and for image maps and OBJECTs as well as stand-alone links.

To specify the tabbing order position for an element, use the tabindex attribute.  For example:

<FORM action="..." method="post">
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>

Here is the complete four-step algorithm that, according to the HTML 4.0 specification, user agents should follow to define the tabbing order on a page:

1. Those elements that support the tabindex attribute and assign a positive value to it are navigated first.  Navigation proceeds from the element with the lowest tabindex value to the element with the highest value.  Values need not be sequential nor must they begin with any particular value.  Elements that have identical tabindex should be navigated in the order they appear in the document.

2. Those elements that do not define the tabindex attribute or do not support it are navigated next.  These elements are navigated in the order they appear in the document.

3. Those elements that support the tabindex attribute and assign a negative value to it do not participate in the tabbing order.

4. Elements that are disabled do not participate in the tabbing order.

Access keys are assigned using the accesskey attribute. For example:

<LABEL
      for="field1"
      accesskey="A">Enter Your <U>A</U>ge:
</LABEL>
<INPUT type="text" id="field1">

The value of the accesskey attribute must be a single character (treated as case-insensitive) from the document's character encoding (see Chapter 41, "Internationalizing Your HTML").