In this Article
There are a variety of methods to correct missing form labels. Review the options below and choose the method that fits best in your form.
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="username"attribute connects the label to the<input>field with the matchingid="username".Benefits:
Clicking the label focuses 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 below.
<span id="search-label">Search</span> <input type="text" aria-labelledby="search-label">
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 is covered in a separate article.
Resources
Labeling Controls - part of W3C Forms Tutorial
Learn More with WCAG
Review form label basics in our Learn about Form Element Labels article.
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!