Illustration of hand hovering over computer

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?

Form using placeholder text
A form using placeholder text instead of form labels.

  1. 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.

  1. 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.

Form where placeholder text disappears when user begins typing
This makes it really hard for the user to remember what they were typing in the field.

  1. Placeholder text can be mistaken as having a pre-filled form input, causing users to skip over the input.

  1. For users using high contrast mode on their device, placeholder text makes it look like the form field is already filled.

Browser window in high contrast mode.
High contrast mode helps people with visual impairments by putting text in sharp relief with the background.

  1. Placeholder text cannot be automatically translated. This makes your website less accessible to those trying to access it in a different language.

  1. 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.

  1. 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.

Form field for gross household income including tool tip with the definition
Try using a tooltip that is accessible via keyboard if you absolute need to include more information alongside your form field.

Want to do some additional reading? Check out these resources:

https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research#:~:text=Placeholder%20Attribute%20Is%20Not%20A%20Label!,-Placeholder%20Attribute%20Is&text=The%20placeholder%20should%20only%20be,those%20with%20cognitive%20impairments...

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/

https://www.nngroup.com/articles/form-design-placeholders/