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.

Disadvantage of only using a placeholder

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 a description.

Basic HTML example for a placeholder


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

Note: Sufficient color contrast guidelines for text against the background also apply to placeholders. The topic Color contrast of text against its background tells you more about this.

Resources

WCAG Success Criteria for placeholders

Other resources

  • First published: October 10, 2025
  • Last updated: September 14, 2026
  • Edit article: Improve it on GitHub