Forms Labelled Only by Placeholder Text

Grey words inside the box

Plenty of contact and booking forms have no labels. Each field holds a grey hint inside the box, such as Name, Email or Phone, and nothing else says what the field is for.

It looks tidy, which is why so many designs use it. It also stops working the moment someone types, because the hint disappears and takes the field's name with it.

In Internet Explorer 11, still on many office computers, the hint goes as soon as the field is clicked, before a single letter is typed.

WCAG 2.0, the accessibility standard most organisations work to, expects labels or instructions wherever a form asks for input. A hint that vanishes is a poor substitute for either.

Who the missing label fails

• People checking before they send, who see answers without questions.
• People with tired or older eyes, who cannot read pale grey text.
• Screen reader users, who may hear nothing about what a field wants.
• People who get interrupted and come back to a half-finished form.
• People using autofill, whose browser fills fields they cannot then check.
• People fixing an error, when the rejected field no longer has a name.

The fifth is the one most owners have met without noticing. The browser fills six fields at once, every hint vanishes together, and nothing shows whether the work number landed in the mobile field.

Too faint to read

Placeholder text is pale on purpose. It has to look different from typed text, or nobody could tell an empty field from a filled one.

That paleness is the trouble. WCAG 2.0 sets a minimum contrast of 4.5 to 1 for ordinary text at level AA, and the light grey used for most hints falls well short.

Darken it enough to read comfortably and it starts to look like an answer already given. The hint cannot be both readable and obviously empty, so it should never carry the label.

What a screen reader hears

A screen reader announces each field's label as the person moves into it: email address, edit text. That works only when a real label is connected to the field in the page's code.

Placeholder text is handled unevenly. Some combinations of browser and screen reader read it, some read it only while the field is empty, and some ignore it.

When nothing is read, the person hears edit text and has to guess from the order of the fields. That works for name and email, and fails by the fourth field.

A worked example

A real estate law firm that handles residential purchases had an intake form for new buyers: names as they appear on the contract, the property address, three dates, the realtor and the lender.

Every field was labelled only by placeholder text. Once filled in, the completion, possession and adjustment dates looked identical: three dates in a row, with no names.

Clients checking their answers could not tell which date was which, and some swapped two. The assistant phoned to confirm dates on many new files, which defeated the point of the form.

On a phone it was worse. The keyboard covered half the screen, and the field being typed into had no name anywhere in view.

The rebuilt form put a label above every field and a short hint under each date label: when the money changes hands, when you get the keys, when taxes and fees are split.

The assistant still calls each new client, but no longer to ask which date went where.

Labels above, hints outside

The fix is plain and old: a visible label above each field, a few words long, that stays put while the person types.

In the code, each label is tied to its field, so clicking the label puts the cursor in the box and a screen reader announces it on arrival.

Anything extra, such as the format of a date or why you are asking, goes in a hint just under the label, outside the box, and is tied to the field as well.

The placeholder can then stay empty. If it shows anything, it should be an example, never the only description of the field.

Above rather than beside: labels to the left squeeze the box on a phone, while a label above works at every width.

The keyboard check

Many people fill in forms without a mouse, from habit, injury or necessity, and the keyboard is how most screen reader users move through a page.

Leave the mouse alone and work through the form with the Tab key. Each field should be reached in the order it appears, with a clear outline showing where you are.

Then click each label. If the cursor jumps into the field, the label is connected; if nothing happens, it is only text sitting nearby.

Finally, send the form with a mistake in it and see whether the error message names the field and sits next to it.

Floating labels and other compromises

Some designs start with the hint inside the box and slide it above the field in small type once the person starts typing.

That beats a hint that vanishes, since the name survives. The small text is often faint, though, and some versions misbehave when a browser autofills the form.

If your design uses them, check the shrunken label for contrast and make sure it is still a real label in the code.

The counter-case

A single search box with a button beside it is widely understood without a visible label. So is a one-field newsletter signup with a clear Sign up button.

Even there, a label hidden from view but present in the code keeps the field clear to a screen reader, and costs nothing to add.

If you cannot fix every form at once, start with the one the business depends on, usually the booking or quote form, and work outward.

For any form that asks more than one question, give every field a visible label above it and never let the grey text do a label's job.

The check

1. List every form on the site.
2. Fill one in and read it back before sending.
3. Look for grey hints standing in for labels.
4. Click each label to see if it is connected.
5. Tab through the form without touching the mouse.
6. Send one with a mistake and read the error.
7. Ask your developer to add labels above every field.

Step two is the one that convinces people. Reading back your own answers, with nothing to say which question each belongs to, shows the problem faster than any standard.

The same reliance on one fragile signal is covered in links you can only spot by colour.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.