Use title attributes to label form controls when the visual design cannot accommodate labels. In this case, tooltips must be used to display the title attribute of a form element when the user places the mouse over that element. Whenever the tab focuses the appropriate fields the screen readers announce the title attribute to the user. However, if a label is not present, the field is not accessible for a screen reader user because they hear no information about how to complete the form.

Guidelines:

• Use the <title> attribute to identify form controls when the <label> element cannot be used
• If both <label> element and <title> attribute are specified, the <label> element will override the <title> attribute
• If both title attribute and alt attribute are specified, the title attribute will override the alt attribute
• The title attribute specified should be meaningful

Example:

In this example, users enter their phone number into three separate fields. The first input field is labeled Phone, so the <label> element identifies the label. The other fields have no visual labels, so the title attribute provides information about the fields. If the <label> element is not provided, the screen reader reads the title attribute.
Phone: - -

Validation Technique:

Use screen reader software to test this function. Navigate through the form using the Tab key to move from one control to the next and listen to how the screen reader announces each control when it receives the focus.