Dealing with placeholder text

Placeholder text is often seen inside form fields as a hint to users how to complete the field or explaining what the field does. For example, placeholder text in an ’email’ field might demonstrate the required format for an email address. Often, the idea is to help users complete forms and increase conversion rates.

So what’s the problem? People seem to set placeholder text with the right intention, but there are better ways to achieve the same result. Plus, in some circumstances, placeholder text can be bad for accessibility.

It’s important to note at this point that placeholder text is different to a label, which sets up what a form field is for. However, some websites dispense with labels and use only placeholder text to signal the purpose of the field.

Bad colour contrast

Placeholder text is often a very light grey, which fails rules on colour contrast. It’s also difficult for users to change this as the text may not be styled with CSS or put under user control.

Confusion

Placeholder text is most confusing when it is used to replace a field label. Users can easily miss the purpose of the field if they quickly click or tab into it. There’s often no way to get the placeholder text back either.

Users with cognitive disabilities can be under extra pressure if placeholder text disappears as they may struggle with memory and recall.

Placeholder text can also look as if a field is already filled in, causing users to miss out fields entirely.

Error identification

Placeholder text often makes error prevention and identification much harder for users as they cannot easily see what mistake they have made. This is compounded when websites remove labels in favour of placeholder text. Checking a submission is near impossible without labels on fields.

When users do make an error, a lack of field labels makes it extremely difficult to fix errors as no detail is available on the nature of the mistake.

When you’re designing forms, it’s best to keep away from using placeholder text. Label fields with good descriptions and add help text around a field, rather than inside it. That way, users can read and understand your form, as well as correct any mistakes they make.

Do you use placeholder text? How do you make it accessible? Let me know in the comments.