In this Article
Ways to Label a Form Field
Using the
aria-labelAttribute if a visible label is not practicalUsing the
aria-labelledbyAttribute when another element has the label text
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 matchingid="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">
Resources
Labeling Controls - part of W3C Forms Tutorial
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!