15.3. Accessibility FeaturesThe HTML 4.01 Recommendation added a few form elements and attributes that aid in accessibility . Some provide improved ways to group and label form structure and content. Others provide keyboard alternatives for selecting and activating (such as bringing focus to) form fields.
15.3.1. LabelsThe label element is used to associate some descriptive text with a form field. This provides important context for users accessing the form with a speech-based browser. Each label element is associated with exactly one form control.
<label> ... </label> Attributes
There are two ways to apply a label to a form control. One is to nest the control and its associated description within the label element. Following is an example of labels being applied to a simple form with this method. <form action="/cgi-bin/guestbook.pl" method="GET"> <label>Login account: <input type="text" name="login" /></label> <label>Password: <input type="password" name="password" /></label> <input type="submit" /> </form> The other method is to associate the label with an id value specified in the input form. The for attribute says which control the current label is for. This method is useful for form fields that are not juxtaposed with their descriptions, such as when they span across different table cells. The following is an example of the label element referencing an id. <form action="/cgi-bin/guestbook.pl" method="GET"> <label for="log">Login account:</label> <input type="text" name="login" /> <label for="pswd">Password:</label> <input type="password" name="password" /> <input type="submit" /> </form>
15.3.2. fieldset and legendThe fieldset element is used to create a logical group of form controls. The fieldset may contain a legend element, a description of the enclosed fields that may be useful for non-visual browsers.
<fieldset> ... </fieldset> Attributes
<legend> ... </legend> Attributes
The following form is structured into groups using fieldset elements and includes descriptive legends. <form> <fieldset> <legend>Customer Information</legend> <label>Full name <input type="text" name="name" /></label> <label>Email Address <input type="text" name="email" /></label> <label>State <input type="text" name="state" /></label> </fieldset> <fieldset> <legend>Mailing List Sign-up</legend> <label>Add me to your mailing list <input type="radio" name"list" value="yes" checked="checked" /></label> <label>No thanks <input name"list" value="no" /></label> </fieldset> </form> 15.3.3. accesskey and tabindexAs part of the W3C's efforts to improve the accessibility of web content and interactivity to users without visual browsers or traditional point-and-click browser capabilities, the HTML 4.01 Recommendation introduced several attributes designed to make selecting form fields easier from the keyboard. To use a form control, it must be selected and active. In the web development world, this state is called focus . The following attributes bring focus to a form element without the traditional method of pointing and clicking on it with the mouse. Every user can enjoy these shortcuts for moving around in a form. The accesskey attribute specifies a character to be used as a keyboard shortcut to an element. The actual functionality of the access key may require a keystroke combination such as Alt-key (Windows) or Command-key (Macintosh). The accesskey attribute can be used with the button, input, label, legend, and textarea form control elements. Netscape 4 and other pre-standards browsers do not support access keys. When an access key brings focus to a label element, the focus is passed onto the respective form control. Authors should provide some indication of the access key, such as providing an access key legend in the site or pointing out the access key in context by putting it in parentheses or making it bold or underlined, as shown in the following example. <b>A</b>ddress<input type="text" name="address" accesskey="1" />
Another method for bringing focus to form fields is by hitting the Tab button to move from one field to the next. By default, browsers that support tabbing will tab through in order of appearance in the document. Use tabindex if you want to rearrange the order of focus without rearranging the source markup. It may be used with the button, input, select, and textarea elements. Elements with a tabindex of zero (0) are accessed after elements with positive specified values. Elements with negative tabindex values are left out of the tabbing order. Disabled elements are also left out. Adding tabindex is very straightforward. Address <input type="text" name="address" tabindex="1" /> Zip code <input type="text" name="zip" tabindex="3" /> Phone number <input type="text" name="phone" tabindex="2" /> Although tabindex is intended to be an accessibility feature, many accessibility experts don't necessarily recommend it. In most cases, the order of appearance of form controls in the document source should be logical and sufficient. Changing that order may defy the user's expectations, potentially leading to confusion. Take care using tabindex and only use it with good reason.
15.3.4. title AttributeAnother attribute for improving the accessibility of form fields (as well as links, images, and other resources) is title. Use it to provide a description of the field or special instructions. Speech browsers may speak the title when the form field is brought into focus. Visual browsers may render titles as "tool tips" that appear when the pointer pauses over the control. |