Labels, Not Placeholder Text

This Accessibility Weekly is a deceptively simple rule that many designers forget or don’t like.

When creating a form – whether it’s a multi-field contact form or a single-field search form – Web Content Accessibility Guidelines (WCAG) require that every field have a visible label.

Why Field Labels Matter

It may seem obvious, but labeling fields on your forms is important because the labels tell people what information to enter as they are filling out the form. For screen reader users, providing HTML labels that are correctly coded to be associated with their respective fields is the only way these users will know the field’s expected information.

As described in Accessibility Checker documentation for empty or missing form labels, if a field doesn’t have a label, then, screen readers will only read out the type of the field. For example, on a text field with an empty label or without a label at all, a screen reader might say only “Edit,” “Edit has auto-complete,” or “Edit text, blank.”

If you want to know more about what screen readers say when they find unlabeled fields, PowerMapper has documented what screen readers say when encountering an empty label. They include recordings of what various screen readers say about empty labels in various browsers.

Placeholder Text Isn’t Good Enough

We’ve previously discussed using screen reader text to add hidden information for screen reader users. You might be tempted to have labels but hide them so that they are only visible to screen reader users, then use a placeholder attribute to make a visual label that appears in the field.

We see this all the time on websites that we audit, and I’m pretty sure that at one time or another, we’ve all built a form that used the placeholder attribute rather than a visible field label, because we were putting the field somewhere without a lot of space or because we just thought it looks better.

I’m raising my hand. 🙋‍♀️In fact, here’s a screenshot of this on my own agency website from not too long ago:

From a design standpoint, many of us like this because it’s clean and minimalistic. If you had real labels for each field that are just visually hidden, this would work fine for a screen reader user, with the one caveat that it would likely read duplicate information (the label and the placeholder), which would be annoying. Annoying, but not a WCAG failure.

Accessibility isn’t just for screen reader users, though, and so this is a WCAG failure for sighted people.

Placeholder text typically has low color contrast, so it can fail WCAG if that applies to your form. The biggest problem, however, with only using placeholder text is that it disappears when you start typing into the field.

Say I scrolled to the form above and started to fill it out without revealing the entire thing. When I start to type my name, my browser’s auto-complete function is going to pop up to help me. I like convenience, so I’m probably going to choose to let it in my information. Auto-complete generally does an OK job with email fields and phone numbers, but it can put a lot of strange things in other fields. It might put my address in the company name field. But the moment it does that, I wouldn’t know that it had filled the field out wrong, because I wouldn’t be able to see the label, and the placeholder attribute would now be gone.

Clearly, this is a problem and is the perfect example of why placeholders only are problematic not just for people with disabilities, but for everyone.

What if I really want to design my forms without labels in the fields?

If you want the label to appear in the field or if you are building a website where the designer only put the label in the field, and you want it to be WCAG compliant, it is possible to use a label and change the positioning when the field is clicked in.

For example, on a website we built last year, the designer designed the search field to include what appears only to be placeholder text and not a label.

Our solution to this is to use the label, but absolute position it in the field, then move it up when the cursor enters the search field to type. This achieves the aesthetic that the designer wanted while ensuring the label with be visible the entire time.

Visit the Resource Sharing Project website to see it in action. If you want to achieve a more minimalist design with your field labels, this is the WCAG-compliant way to do it.

Additional Resources

Want to learn more? Need some ammunition to convince your clients that forms need to have visible labels and not just placeholder text? Check out these articles for additional information:

• WCAG 3.3.2 Labels or Instructions – Level A
• Placeholders in Form Fields Are Harmful, Nielsen Norman Group
• Don’t Use The Placeholder Attribute, Smashing Magazine