Form Control Labeling Technique Summary

label elements

  • Labels are visible
  • Should be first choice for backward compatibility support
  • Increases selection area for moving focus or toggling the state of a form control

title attribute

  • Labels are hidden, except many browsers generate a popup tooltip when user hovers pointer over form control
  • Backward compatibility support

ARIA 1.0 aria-labelledby attribute

  • Complex form labeling, where label text is visible on the page
  • Require creating ids and idrefs
  • Can be used to retrofit form controls without labels, without affecting visual rendering

ARIA 1.0 aria-label attribute

  • Labeling text is not visible
  • Can be used to retrofit form controls without labels, without affecting visual rendering

HTML5 placeholder attribute

  • Avoid use for form control labeling
  • Used for both labeling and example input, so it is in a gray area of accessibility right now
  • Compatibility issues