Placeholders are problematic

The placeholder attribute can be used to put hint text inside text inputs. When the user types, the placeholder text disappears to make room for the user’s answer.

Placeholders are popular because they save space and have a minimalist aesthetic. But using placeholder text for labels or even just hint text is problematic.

Here I’ll explain why that is and what you can do instead.

# 1. They’re hard to remember

Placeholder disappears when typing

Placeholder text disappears when the user starts typing which means users have to remember the instructions while they’re trying to answer.

Users may also need to delete their answer to double check the instruction which is time consuming and is an additional cognitive burden.

# 2. They don’t have complete browser support

Broken for browsers lacking support

Not all browsers support placeholders and so in this case users won’t get the instructions.

# 3. They make the fields lack clarity when they’ve been answered

Populated fields lack clarity

When a field has been answered it’s not clear what the value relates to or if it meets the formating requirements.

# 4. They make it hard to check answers before submission

Checking answers is difficult

Some users check their answers before they submit. As placeholder text won’t be visible, it will be hard to reconcile their answers against the field’s requirements.

# 5. They make errors hard to fix

Labels and hints help users answer questions. An error message without that content makes the error harder to fix.

# 6. Some browsers hide them when the input is focused

Some older browsers will hide placeholder text when the input is focused. This means the user has to read ahead of the current field to see the hint.

# 7. They may be mistaken for an answer

Placeholder text has a lower contrast to signify it’s not a real value. But as the signifier is so subtle many users could mistake the hint for an actual answer.

Once they submit the form, the user will have to fix an error that wasn’t really they’re fault.

Some people do notice the text and try to select it to delete it. But placeholder text cannot be selected which can cause a lot of frustration.

# 8. They have insufficient contrast

Placeholder text has low contrast to differentiate it from a real answer but this makes it ineligible for people with vision impairments.

# 9. Some screen readers don’t recognise them

Some screen readers don’t acknowledge placeholder text making the form especially difficult for screen reader users.

# 10. They reduce the the label’s hit area

No label means a smaller hit area

Clicking a label sets focus to the related input, which is useful — especially for people with motor impairments.

So fields with the label and hint text outside the input increases the size of the hit area.

# 11. They crop long text

Long placeholder text gets cropped

Long placeholder text gets cropped making it inaccessible.

# 12. Some browsers won’t translate them

Chrome, for example, will fail to translate placeholder text.

# 13. They don’t work nicely with the browser’s auto completion routine

The browser’s auto-completion routine populates fields automatically so users won’t know what the values relate to making it hard to check answers.

# 14. They look like real text in Window’s High Contrast Mode

Placeholder text in Windows 10 High Contrast Mode

In Window’s High Contrast Mode, placeholder text is given a high contrast color which is easily mistaken for a real value.

# Summary

Placeholders saves space at the cost of usability and accessibility.

Instructional text is crucial content that users need in order to answer questions correctly and efficiently.

Putting that text above the input gives users constant access to the content they need when they need it no matter the situation.

That’s just good design.