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

ID: H65

Technology: html

Type: Technique

## When to Use

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

### A pulldown menu that limits the scope of a search

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 separate 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. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.

    <label for="search-term">Search for:</label>
    <input id="search-term" name="search-term" type="text" value="">
    <select title="Search in" id="scope">
      ...
    </select>

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

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

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

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

## Related Techniques

- H44
- H71

## Resources

- HTML - `title` attribute