Using the title attribute

Sometimes you don't have space on the screen to put a label, or that label would interfere with the design. Or, you might need to put two labels on a single control. Screen readers will read the title on form controls. The title also appears as a tooltip when the mouse hovers over the control, so it can function like a hint for some users.

• Use title when space or design does not allow for on-screen <label> text.
• title can function as a hint
• title cannot be styled by the html author
• On-screen <label> text will be read instead of title by screen readers
• title should state the purpose of the control

The Form

The HTML

The Form (part 2)

The HTML (part 2)

<form class="example" action="demo">
<table>
<th></th>
<th>Labrador Retriever</th>
<th>Cocker Spaniel</th>
</tr>
<tr>
<th>Black</th>
<td>
<input size="20" title="Labrador Retriever - Black" type="text" /></td>
<td>
<input size="20" title="Cocker Spaniel - Black" type="text" /></td>
</tr>
....
</table>
</form>