Placeholders in form fields

For all users to understand how to fill out a form, the labels should be connected to form control.

The placeholder represents a short hint (a word or short phrase) to inform the user on what to fill out a form field. A hint could be a sample value or a brief description of the expected format.

A screen reader announces first the label and then the placeholder.


<label for="search">Search for a product:</label>
<input type="search" id="search" name="s" placeholder="For example: apples">

Only using a placeholder (without a connected label) has some disadvantages:

  • the form field doesn’t have a proper accessible name.
  • the placeholder text may become unreadable when a user zooms in and the text becomes too large for the input field.
  • the placeholder text disappears when the user starts typing in the form field or when the field is filled out with autocomplete.

For a longer hint or other advisory text, place the text close to the form field. In this case, use aria-describedby to connect the descriptive text to the field.

WCAG Succes Criteria

View this page on GitHub