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 doesnt 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

Search for a product:

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

Resources

WCAG Success Criteria for placeholders

Other resources

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

Other pages in: Input and label

  • Accessible name

    Give a form field an accessible name with a label

  • Label has text only

    Use only plain text in a label. Avoid including interactive elements such as links, buttons or tooltips inside the label content.

  • Best label location

    Place the label above the form field, like a text input, textarea or select.

Back to: Input and label

Quick links and main topics

Quick links

Content

Disclaimer: This documentation is intended to help the WordPress community understand and implement accessible practices. It is not a replacement for the official Web Content Accessibility Guidelines. Please read the full disclaimer.

Back to top