Associate Labels With Inputs
ID |
html.label_for_input |
Severity |
low |
Remediation Complexity |
low |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
Html |
Tags |
accessibility, reliability |
Description
Flags a labelable <input> that has no associated <label>, neither a wrapping <label> ancestor
nor a <label for="…"> that references the input’s id.
Rationale
A form control without a programmatically associated label gives assistive technology nothing to
announce, and the visible text near it cannot be clicked to focus the control. Every labelable input
needs an explicit label, either wrapping it or pointing at its id.
<input type="text" id="x"> <!-- FLAW — no label -->
<label for="x">Name</label>
<input type="text" id="x"> <!-- OK — for-associated label -->Remediation
Wrap the input in a <label>, or add a <label for="…"> whose for matches the input’s id.