Skip to main content
All CollectionsAccessibility HelpAccessible Forms
Form Element Label Issues: Correcting
Form Element Label Issues: Correcting

Options for adding form labels

Updated this week

There are a variety of methods to correct missing form labels. Review the options below and choose the best method for your situation.

Using the <label> Element (Explicitly)

The <label> tag associates descriptive text with a form field, using the for attribute to link the label to the field's id.

Example:

<label for="first-name">First name</label>
<input id="first-name" name="first-name" type="text"/>
  • How it works: The for="first-name" attribute connects the label to the <input> field with the matching id="first-name".

  • Benefits:

    • Clicking the label focuses on the associated input field.

    • Screen readers announce the label when the input field gains focus.


Using the <label> Element (Implicitly)

You can also wrap the <input> element directly inside the <label> tag, creating an implicit association without needing the for attribute. The label is automatically associated with the input field it contains.

Example:

<label> Email: <input type="email" name="email"> </label> 

Using the aria-label Attribute

If a visible label is not practical, you can use an attribute like aria-label to provide an accessible name. This defines a text label directly on the input element.

Example:

<input type="text" aria-label="Search box" name="search">


Using the aria-labelledby Attribute

The attribute aria-labelledby is convenient to use when there is another element in the form that contains the label text.

The aria-labelledby attribute links the input to the element with id="search-label", using its content as the label.

Example:

<span id="search-label">Search</span> <input type="text" aria-labelledby="search-label">


Common Client Issue - Search Forms

Incorrectly coded search forms are one of the most common errors with this particular issue.

One option is to visually hide the label:

<label for="search" class="visuallyhidden">Search: </label>

<input type="text" name="search" id="search">

<button type="submit">Search</button>

Another option is to use the aria-label attribute:

<input type="text" name="search" aria-label="Search">

<button type="submit">Search</button>

There is a lot of good information on Labeling Controls in the W3C Forms Tutorial.


Placeholder Text (Not a Replacement for Labels)

The placeholder attribute displays temporary instructional text inside the input field. However, it should not be used as a replacement for a label because:

  • Placeholders disappear when users type, leaving no persistent guidance.

  • Placeholder text is not always announced reliably by screen readers.

Example with Both Label and Placeholder:

<label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Enter your password">

Grouping Checkboxes in Forms is covered in a separate article.


Resources

Learn More with WCAG

Looking for the basics on form labels? Review our article on Form Element Labels: The Basics.

DubBot Flags:

  • Form elements must have labels, Ensures every form element has a label

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?