Please stop using placeholders as labels!!!!

by: Joe Watkins

  • 30 July 2014

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!

In-field example

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.

  1. The developer sticks a placeholder attribute inside the input field because the browser natively handles the show/hide once the user interacts with the field. It does not take a ton of javascript to handle your labels in the same way. Here is some code if you need to do this :)

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

Placeholder browser support from can i use

Helpers

Below you will find a couple pens I came up with that you might find useful.

Proper Label / Placeholder usage

See the Pen Labels/Placeholder example by Joe Watkins (@joe-watkins) on CodePen.

Hide in-field Labels with jQuery

See the Pen Compact Labels by Joe Watkins (@joe-watkins) on CodePen.

Show placeholder values while typing

See the Pen Show placeholder while typing by Joe Watkins (@joe-watkins) on CodePen.

Summary

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.

Resources