Techniques for WCAG 2.0

On this page:

-

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

## Applicability

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

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

## User Agent and Assistive Technology Support Notes

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

## Description

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.

## Examples

### Example 1: 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 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>

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

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>

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

Example Code:

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

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 The title attribute

- Accessible Forms

- Accessible Forms using WCAG 2.0

## Related Techniques

- H44: Using label elements to associate text labels with form controls
- H71: Providing a description for groups of form controls using fieldset and legend elements

## Tests

### Procedure

1. Identify each form control that is not associated with a `label` element

2. Check that the control has a `title` attribute

3. Check that the `title` attribute identifies the purpose of the control

### Expected Results

- All checks above are true.

- Top
- Contents
- Intro
- Previous: Technique H64
- Next: Technique H67