Use placeholders only for visual appeal as they are useless as label or help text.
Main reasons are:
- Placeholders are possibly ignored by screen readers
- Low contrast text is not easy to read for some people
- The text disappears as soon as the field has input
So add the label, examples and instructional text always outside the field making good use of accessibility practices like adding aria-describedby
. You can still add a placeholder as a bonus, but what it contains shouldn't make a difference. An example is in most cases the best placeholder, but if such example could really help someone too, also add one to the instructions. This may sound redundant, but it isn't.
This article explains it all very well:
https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/