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 (visible to users, read by screen reader).
  • title can function as a hint
  • title cannot be styled by the html author
  • title not keyboard accessible
• On-screen <label> text will be read instead of title by screen readers
• title should state the purpose of the control
• Could use aria-label as substitute but not visible to sighted users
• Accessible Input tooltip (Heydonworks) - works on focus only, no javascript, see below for hover and focus example
• Accessible styleable tooltip (uses javascript, on hover and focus)

The Form

The HTML