Accessibility is the key :)
Accessibility is very important to keep in mind when authoring web-based experiences. When you use a
placeholder attribute on an
input field in place of a
label element you are not only misusing an attribute you could be rendering your web form unusable to many users and defying a spec that clearly states:
The placeholder attribute should not be used as an alternative to a label.
The W3C has this to say about it:
The placeholder attribute is not a substitute for the label element.
What are placeholders for?
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. eg. “enter your email address” read more
What are labels for?
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself. read more
In-field labels.. let’s stop this too!
The ‘classic’ in-field label is something we should also try stray from using as well. An exception to this may be if the form consists of one or two fields eg. search/log in forms. Through usability testing folks are finding these types of forms are unusable,.. especially on a mobile device. The vertical space you are saving is not worth losing a conversion or excluding a user that requires your form to be accessible.
Why do we see this pattern?
I believe there are two major reasons why we are seeing placeholder misuse.
The developer sticks a
placeholderattribute inside the
The developer simply does not know what the attribute is for. There is a shortage of of quality accessibility information out there for developers and it is easy to fall into the trap mentioned in reason #1.
Placeholder Browser support
It is also important to know browser support for the HTML5
placeholder feature. There are polyfill hacks out there for older browsers.
Below you will find a couple pens I came up with that you might find useful.
Proper Label / Placeholder usage
Hide in-field Labels with jQuery
Show placeholder values while typing
Creating web-based projects that are accessible can be tough and there is still a lot to learn for us all. When it comes to an attribute like
placeholder it is a cool feature that can add accessibility if used correctly,.. if misused it has quite the opposite effect.