In the world of web accessibility, few things are more fundamental than a form with clear, visible, and properly associated labels. A visible label is a piece of text that tells the user what a form element is for. It’s a crucial element of any accessible and user-friendly website, as it helps all users understand and interact with your forms, especially those who use assistive technologies like screen readers.

Think of your form elements as a row of unlabeled buttons. Without a label, you have no idea what each button does. The same is true for your website. By giving each form element a visible label, you can create a more accessible and user-friendly experience for everyone. For a deeper dive into the world of accessibility, see our article on accessibility.

An illustration of a name tag, symbolizing the importance of giving your form elements a visible label.

Why Placeholders Are Not Labels

A common but incorrect practice is to use the `placeholder` attribute as a replacement for a visible `

  • They disappear: Placeholder text vanishes as soon as the user starts typing, which can make it difficult for them to remember what the field was for.
  • Poor Contrast: Placeholder text often has poor color contrast, making it hard to read.
  • Inconsistent Support: Not all screen readers announce placeholder text, meaning the input may have no accessible name at all.

Correctly Associating Labels

Fixing missing visible labels is a simple but important task. The key is to programmatically associate the label with its form control. For a complete technical overview, see the MDN guide for the label element.

Explicit Association (Preferred)

This method uses the `for` attribute on the `

<!-- Before: No label --> <input type="text" id="name" placeholder="Your Name"> <!-- After: Correctly associated label --> <label for="name">Your Name</label> <input type="text" id="name">

Implicit Association

This method involves wrapping the “ element inside the `

<label> Your Email <input type="email"> </label>

For another excellent resource, check out this guide to form labels from WebAIM.

An illustration of a checklist, symbolizing the importance of making sure your form elements have visible labels.

Frequently Asked Questions

What is a form label?

A form label is a piece of text that is programmatically associated with a form element, such as an input field or a checkbox. It tells the user what information the form element requires.

What if I can’t have a visible label for design reasons?

If a visible label is not possible, you must still provide an accessible name. You can use the `aria-label` attribute directly on the input to provide a name for screen readers. Alternatively, you can use a class to visually hide a `<label>` element, but this is less preferred than using `aria-label`.

Why is it important for form elements to have visible labels?

Visible labels are crucial for all users to understand the purpose of a form field. They are especially important for users of assistive technologies like screen readers, which announce the label when the user focuses on the input. They also provide a larger clickable area for users with motor impairments.

Ready to make your forms more accessible? Start your Creeper audit today and see how you can improve your use of form labels.