HTML and XHTML form controls that are not identified using value,
alt, or element content
This technique relates to:
User agents will display a tool tip when the mouse hovers above an
input element containing a title attribute.
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 title attribute to label
form controls when the visual design cannot accommodate the label (for example, if there
is no text on the screen that can be identified as a label) or where it might be
confusing to display a label. User agents, including assistive technology, can speak the
title attribute.
A search form uses a pulldown menu to limit the scope of the search. The pulldown
menu is immediately adjacent to the text field used to enter the search term. The
relationship between the search field and the pulldown menu is clear to users who
can see the visual design, which does not have room for a visible label. The
title attribute is used to identify the select menu. The
title attribute can be spoken by screen readers or displayed as a
tool tip for people using screen magnifiers.
Example Code:
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.
Example Code:
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset> A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
Example Code:
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.
For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.
Resources are for information purposes only, no endorsement implied.
Identify each form control that is not associated with a label
element
Check that the control has a title attribute
Check that the title attribute identifies the purpose of the
control
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.