Section 15.3. Accessibility Features

15.3. Accessibility Features

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

The added benefit of elements that describe the structure and relationships within form content is that they provide good "hooks" for applying style sheet rules, as addressed briefly at the end of this chapter.

15.3.1. Labels

The 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> ... </label> 

Attributes

Core (id, class, style, title), Internationalization,

Events, plus onfocus, onblur

accesskey="character"

for="text"

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> 

id and name in Form Elements

When applied to form control elements (such as input, select, etc.), the id and name attributes have different and distinct functions. The value of the name attribute is passed to the forms processor when the form is submitted. The id attribute is used to give the element a unique identifier that may be accessed by a style sheet rule, script, or the label element as shown in the previous example. An id attribute may not be used in place of name, because its value will not be submitted with the form.

This is not the case for the form element itself. For the form element, id and name have a similar role in assigning a unique name to the form. Which one you use depends on the markup language you are using. In HTML, the name attribute may be used to give the form a name to make it accessible to scripts. In XHTML, only id may be used, and the name attribute has been removed from the DTD.

15.3.2. fieldset and legend

The 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> ... </fieldset> 

Attributes

Core (id, class, style, title), Internationalization, Events

legend

---

     <legend> ... </legend> 

Attributes

Core (id, class, style, title), Internationalization, Events

accesskey="character"

align="top|bottom|left|right" (Deprecated)

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 tabindex

As 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" /> 

Accessibility specialists suggest using numbers instead of letters so as not to conflict with other software keystroke combinations. Others suggest that access keys should not be used because they are not transparent to the user and rely on the author providing access key legends or cues.

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.

As of this writing, tab indexing is poorly supported in Safari 1.0 and Firefox 1.0 on the Macintosh OS X. Because of bugs and incomplete implementation, tabindex may be assumed to apply to text-input fields only in these browsers.

15.3.4. title Attribute

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