Form-field is missing a proper label
| Field | Value |
|---|---|
| Rule code | FormField_Label_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 3.3.2 Labels or Instructions |
| Must be fixed at source | No |
Description
All form-fields that possess user interaction should be explicitly associated with a label. An HTML label tag can be used with a for attribute to identify the form-field id it is associated to. Without a label, a form-field may not be correctly announced to assistive technologies and a user filling out the form will not know what to enter or which input has an error.
How to fix
Each <input> element needs to have a corresponding <label> element. Associate the label to the input using an id attribute on the input and a for attribute on the label. Use the same value for both attributes to connect them.
<label for="search">Search</label>
<input type="text" name="search" id="search">