The <label> Element
As defined in the HTML Living Standard, the <label> element represents a caption for an item in a user interface.
<label for="username">Username:</label>
<input type="text" id="username">
View HTML Living Standard: The label element
Association Methods
There are two standard ways to associate a label with a form control:
- Explicit Association (Recommended): Using the
forattribute on the label to match theidof the control. This is the most robust method for assistive technology. - Implicit Association: Nesting the control inside the label element.
WCAG Requirement: Labels or Instructions
Success Criterion 3.3.2 (Level A): Labels or instructions are provided when content requires user input.
Without a programmatic label, screen reader users may reach a field and hear nothing but "Edit text, blank." By using the <label> element, you ensure the control has an "Accessible Name" (satisfying WCAG SC 4.1.2) that is announced the moment the user focuses on the field.
The "Hit Target" Benefit
The <label> element is not just for screen readers. When a label is associated with a control, clicking the label text will automatically move focus to (or toggle) the control.
- Motor Impairments: For users with limited fine motor control, clicking a small checkbox or radio button can be difficult. The label significantly increases the clickable area, making the form much easier to use.
- Cognitive Load: Clear, visible labels that stay on screen (unlike placeholders) help users with memory or cognitive disabilities understand what information is required.
A11y Tip: One Label per Control
While a control can have multiple labels, a label should only ever be associated with a single control. If you need to provide additional instructions, use the aria-describedby attribute to link the input to a separate paragraph of text.