Why you should stop using placeholders in text boxes

https://gyazo.com/af23c39b10e3cbefe988922ebc9f5379

Why you should stop using placeholders in text boxes (10min) monthly reminder that HTML placeholders are not labels, and shouldn’t be used as such. Here are a couple of issues with them: they disappear upon input, so, you are forcing people to remember what they are supposed to fill. They might be confused with pre-populated data, so the user might wonder “wait do I need to fill this?” or skip it, thinking it’s filled. They are also not universally adopted by assistive technology (AT), so some might read those, some might not. Not only that, but they have poor color contrast, so, some users might not be able to read them (and if you make them darker, people might think it’s filled data). Without a label, the clickable area of a text box is decreased. They are also obscured after validation, since user filled content, so, users have to delete their content to get to see them again.

Based on this, according to Daniel Berryhill, placeholders are essentially pointless. I tend to agree here, to the point where I kind of wonder why this ever made it to the browser. But, here we are. So, what to do instead? Use labels, have hints and form instructions outside the field (and link it to the field with some aria).