Using the title attribute to identify form controls when the label element cannot be used

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

HTML form controls that are not identified using value, alt, or element content

This technique relates to:

Description

The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the title attribute.

Examples

Example 2: Input fields for a phone number

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.

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

Example 3: A Search Function

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.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Example 4: A data table of form controls

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 or 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 contains the information necessary to identify the control.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all form controls that are not associated with a label element:

  1. Check that the control has a title attribute

  2. Check that the purpose of the form control is clear to users who can see the control.

  3. Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.

Expected Results

  • Checks above are true.