Placeholders are not a replacement for field labels

When creating forms for your website, it’s important to make sure the purpose of each field is clearly described to the user.

The label element is the default way to do this and works best with screen readers. You can use a for attribute on the label to associate it with the form input’s ID or name.

<label for="emergency_phone">Emergency Contact Phone Number</label>
<input type="telephone" id="emergency_phone" placeholder="(000) 000-0000" />

If a field does not have a label associated with it, screen readers will only announce the field’s input type (e.g. email, password, search, telephone, text, URL).

It’s common for web designers to create form styles that eliminate labels and rely on placeholders to communicate the purpose of the field. This offers a more minimal ascetic, but comes with a number of downsides (even for sighted users).

• Placeholder text will not be announced to screen reader users. Any descriptive information present in the placeholder will be missed.
• Placeholder text typically disappears when the user starts typing in a field. This can cause confusion for users with cognitive impairments and prevents the user from reviewing the form for accuracy.
• Placeholders lack proper color contrast. The default browser styles for placeholder text does not pass the minimum color contrast ratio required by WCAG SC 1.4.3.

It’s possible to build beautiful web forms that meet accessible standards. It just takes a little more planning. However, it’s time well spent and will greatly improve the usability of your forms for all users.