Techniques for WCAG 2.0

On this page:

-

# H89: Using the title attribute to provide context-sensitive help

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.3.5 (Help)
  - How to Meet 3.3.5 (Help)
  - Understanding Success Criterion 3.3.5 (Help)

## User Agent and Assistive Technology Support Notes

- Some current assistive technology provide feedback to the user when form fields have title attribute content available.

- Some graphical user agents will display a tool tip when the mouse hovers above a form field containing a `title` attribute. However, current user agents do not provide access to the `title` attribute content via the keyboard.

- The tool tip in some common user agents disappears after a short period of time (approximately 5 seconds). This can cause difficulty accessing title attribute content for those users who can use a mouse but have fine motor skill impairment, and may result in difficulties for users who need more time to read the tool tip.

- It is difficult for most users to resize, adjust background colors, reposition or otherwise control the presentation of title attribute content in many current user agents.

- This technique can only be used when the element has an explicitly associated label. In the absence of a lable, the title will be used as the Name in the accessibility API of current user agents that support one. The help text described below makes a poor name.

## Description

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a `title` attribute. The help may include format information or examples of input.

Note: Current user agents and assistive technologies do not always provide the information contained in the `title` attribute to users. Avoid using this technique in isolation until the `title` attribute has wide-spread support.

## Examples

### Example 1

A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a `title` attribute value with an example of the address format the user should enter.

Example Code:

    <label for="searchAddress">Address: </label>
    <input id="searchAddress" type="text" size="30" value="" name="searchAddress"
     title="Address example: 101 Collins St, Melbourne, Australia" />

### Example 2

A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a `title` attribute providing information on locating the account number.

Example Code:

    <label for="accNum1">Account number: </label>
    <input id="accNum1" type="text" size="10" value="" title="Your account number
     can be found in the top right-hand corner of your bill." />

## Related Techniques

- H65: Using the title attribute to identify form controls when the label element cannot be used
- G71: Providing a help link on every Web page

## Tests

### Procedure

1. Identify form controls that require text input.

2. Check that each form control has an explicitly associated label

3. Check that each form control has context-sensitive help provided in the `title` attribute.

### Expected Results

- Checks #2 and #3 are true.

- Top
- Contents
- Intro
- Previous: Technique H88
- Next: Technique H90