Skip to content

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

About this Technique

This technique relates to:

This technique applies to HTML form controls that are not identified using value, alt, or element content.

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="area-code" name="area-code" 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="last-digits" name="last-digits" 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.

Related Resources

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.
Back to Top