Placeholder

Please do not use a placeholder.

  • Placeholder without a label conflicts with SC 2.4.6:
    when you type something, the placeholder disappears.
  • Providing help via a placeholder is temporary. As soon as you type, the help is gone
  • In the early days, placeholder text was placed as real text in the input field. Not removing it means unintentional wrong input. (And yes, nowadays in 2020 this still happens!)
  • Users might consider the placeholder as default text (which they can skip).
  • In long forms it is less easy to scan for empty fields when placeholder text is used.
  • Often too low contrast SC 1.4.3.
    Solving it by making the contrast ratio higher might have an effect on the user, thinking that the field already is filled in
  • Screenreaders
    read out placeholder text... or not. ARIA might overrule the text.
  • Placeholder text can be partly hidden if an inpt field is limited of size. Also through responsiveness input fields might get visually smaller.
  • And than there were floated labels.
    Moving things around teh screen is never a good idea. Remember that there are a lot of people not watching the screen while they type! They miss the fun and might get confused because of the layout difference since they last saw the screen.

Conclusion: only use labels and instructions outside the input field.

Some user experience

  • In user tests I have seen people trying to put the mouse cursor behind the placeholder text, then trying to remove the text with back space. (when looking up they looked surprised they succeeded that quickly in removing the text)
  • I myself lost 15 minutes of my live because placeholder text looked almost exactly as my id I had to fill in; so I thought it was already there. (By the way; the error messages were not clear either)
  • I have even seen forms where both input as placeholder were visible on top of each other.
  • A field for a web address contains a (placeholder) hint "http://". Now does that mean that I have to fill in the web address with http:// of do I only have to add the address to "http://"?