In this Article
What are Form Element Labels?
What are Form Element Labels?
Form element labels in HTML are descriptive text or elements that communicate the purpose of an associated form control (such as an input field, checkbox, or radio button) to users. Labels help both sighted users and users of assistive technologies, like screen readers, understand what kind of information is expected in a form field.
An example of a form field with an explicit label:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your
username">
</form>
Input Types that Need Labels
The following form elements should have labels:
text entry fields, for example
<input type="text">
,<input type="password">
and<textarea>
radio buttons,
<input type="radio">
checkboxes,
<input type="checkbox">
There are two exceptions:
<buttons>
, they are self-labelinghidden input - if an input has the type attribute of hidden, type="hidden", no label is needed, as these are hidden and not available for user input.
Why Form Labels Matter
Effective form labels are essential for ensuring forms are accessible. Screen reader users cannot understand what is expected in a form's input fields without labels.
While the purpose of form elements like checkboxes or input fields may be visually apparent to sighted users, these elements must be programmatically labeled to be useful for screen reader users. Screen readers rely on labels to associate information with input elements, and without this relationship (or redundant text serving as a label), the purpose of the input remains unclear. Labeling all form elements eliminates confusion and creates a more inclusive experience.
A lack of labels also has additional drawbacks. Fields without labels cannot receive proper focus when navigated by screen readers. Additionally, users with motor impairments miss out on the benefit of an expanded clickable area, as clicking on the label is designed to activate the associated control.
Best Practices:
Always use a visible
<label>
whenever possible for clarity and accessibility.Ensure the label text is concise and descriptive.
<label>
should be used instead of thetitle
attributeDon't rely solely on visual cues like placeholder text or icons to communicate the field's purpose.
Test your forms with screen readers to confirm proper label functionality.
More information on Creating Form Labels.
Resources
Labeling Controls - part of W3C Forms Tutorial
Learn More with WCAG
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!