Accessibility Weekly

Labels, Not Placeholder Text

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 10

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:

Form with 5 fields that use a placeholder rather than a label: first name, last name, company name, email, phone.

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.

A search field with the text “Search Resources by Keyword” contained within the field.

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.

The same search field now shows the label, “Search Resources by Keyword” shifted up and the search “Equalize Digital” typed below it.

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:

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …