Feed on

Form Fields Without Visible Labels

Sometimes form fields, such as a search text box, do not have visible label text. In order to be accessible, these fields must have descriptive text provided in one of two ways:

  • Use the “title” attribute in place of a label. If a form field has a title but no label, the screen reader will read the title as if it were a label. Using the “title” attribute will also create a tooltip that will be visible if a user hovers over the form field with a mouse.
  • Use the “<label>” element and hide the label element off-screen using CSS. This technique has the advantage of creating a label that will be visible when styles are disabled. It is also possible to use CSS to create a label where part of the text is visible and part of the text is hidden off-screen.

Leave a Reply

MDTAP | 2301 Argonne Drive, Room T17 Baltimore, Maryland 21218| Voice: 410-554-9230 Toll Free ⁄ Voice 1-800-832-4827|Email: mdtap@mdtap.org