This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.
Changes are displayed as follows:
HTML, XHTML controls that use external labels
This technique relates to:
The HTML specification allows both implicit and explicit labels. However,
some assistive technologies do not correctly handle implicit labels (for example, <label>First name <input type="text" name="firstname"></label>).
JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.
Home Page Reader 3.04 reads the label for explicit and implicit labels the same when in control reading modes. In item reading mode explicitly and implicitly labelled text fields behave the same. When stepping from item to item in item reading or Windows cursor reading mode , Home Page Reader reads the label and control name together for implicitly labelled radio buttons and checkboxes but not for explicitly labelled ones.
Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.
User agents will display a tool tip when the mouse hovers above an input element containing a title attribute. [begin add]Title attributes are exposed to assistive technology and are displayed as tooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.
[2107]
[end add]
If no label is available, JAWS and Window-Eyes[begin delete], and Home Page Reader[end delete] speak the title attribute when the form control receives focus
JAWS 6.0 and later can be set to speak both label and title when the two items are different; however, very few users are aware of this setting.
WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.
Home Page Reader 3.04 will speak the title attribute of any element with focus when the control-shift-F1 keys are pressed simultaneously.
The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.
Note that the label is positioned after input elements of type="checkbox" and type="radio".
Note 1: Elements that use explicitly associated labels are:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
Note 2:
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).
Submit and Reset buttons (input type="submit" or input type="reset")
Image buttons (input type="image")
Hidden input fields (input type="hidden")
Script buttons (button elements or <input type="button">)
The text field in the example below has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.
<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
<input type="checkbox" id="markuplang" name="computerskills" checked="checked"> <label for="markuplang">HTML</label>
A small, related group of radio buttons with a clear description and labels for each individual element.
Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="checkbox" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="checkbox" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="checkbox" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>Resources are for information purposes only, no endorsement implied.
HTML 4.01 HTML 4.01 form labels
For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:
Check that there is a label
element that identifies the purpose of the control
before the input element
Check that the for attribute of the label element matches the id of the input element
For all input elements of type checkbox or radio in the Web page::
Check that there is a label
element that identifies the purpose of the control
after the input element
Check that the for attribute of the label element matches the id of the input element
All checks above are true.