Placeholder text is so common it must be good for accessibility, right? Not so much.
When it comes to web accessibility, there's still a lot to learn, but just because certain patterns are common, it does not mean they are helpful or accessible.
So why should you avoid placeholder text?
- The contrast setting for placeholder text almost always falls below the accessible threshold. It's hard to see, and there's not much you can do about that. If your field labels are clear, that should be enough to eliminate ambiguity and make it obvious what the user should be entering in the form field.
- Placeholder text disappears as soon as the user begins typing. If the placeholder text contains any important information, it's lost to the user when they begin typing, and if they need that information, they'll likely have to delete what they typed in order to see the placeholder text again. For users with cognitive disabilities or memory problems, having to memorize placeholder text before beginning to enter information creates additional strain.
- Placeholder text can be mistaken as having a pre-filled form input, causing users to skip over the input.
- For users using high contrast mode on their device, placeholder text makes it look like the form field is already filled.
- Placeholder text cannot be automatically translated. This makes your website less accessible to those trying to access it in a different language.
- Placeholder text does not reliably work for all screen readers. Screen reader users may not hear placeholder text at all, which creates a very confusing interaction.
- Sometimes, users have to delete placeholder text manually. This isn't a great experience, and creates additional work for users before they are able to access the functionality of the element they're interacting with.
What if you absolutely need to include a hint?
Fair enough, sometimes you do need a hint to go alongside your form field. Consider using an example or tooltip instead, if this is the case.
Want to do some additional reading? Check out these resources: