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.