HTML and XHTML controls that use external labels
This technique relates to:
The HTML and XHTML specifications allow 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.
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. 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.
If no label is available, JAWS and Window-Eyes 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.
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.
This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
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.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />Example Code:
<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.
Example Code:
<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="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" 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.
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
Check that the label element is visible.
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
Check that the label element is visible.
Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.