Placeholder Text
- Kim Collins (Unlicensed)
The placeholder attribute has several usability and accessibility issues. It is never a replacement for a programmatically associated <label> element, and should not be used to convey information a user needs to be able to fill out a form field.Â
(Some of) the problems with placeholder
Text in the placeholder attribute disappears when a user begins entering content in a form field.
Using placeholder text for labels or input hints creates a barrier for users with cognitive impairments. If a user forgets the label or hint while filling out a field, they have to delete the content of that field to see the label or hint again. It is difficult for all users to review their form input before submitting, since they can no longer see what information was expected in each field, and in what format.
Placeholder is not reliably announced by screen readers.
Some screen reader/browser combinations will announce the placeholder attribute, and some will not.Â
While developers may be tempted to use placeholder as the visible label and add an aria-label attribute to the input for screen reader users, this approach can result in both the label and the placeholder being announced.
Placeholder has inherent colour contrast issues.
By default, placeholder text does not have enough colour contrast to be easily readable (or to meet WCAG level AA requirements). Increasing the contrast, however, gives users the impression that the field already has content in it.Â
Workarounds
If a formatting hint is needed for a form field, it should always be visible to the user. Hints can be programmatically associated with inputs using the aria-describedby attribute on the input:
<label for="date">Date of birth</label> <div id="date-hint">Date format: DD/MM/YYYY</div> <input aria-describedby="date-hint" id="date" type="text">
Resources
Don't Use the Placeholder Attribute - Smashing Magazine
Placeholders in Form Fields are Harmful - Nielsen Norman Group