Form field: Form field is missing an accessible name
form-label-missing
Rule
Labels MUST be programmatically associated with their corresponding elements.
Background
People who are blind cannot use the visual presentation of a form to determine the label for a form element. In order for screen reader users to be certain of a form field's label, every form input and control needs a label, also known as an "accessible name." When form elements have a programmatically determinable accessible name, a screen reader user can put focus on a form element and the screen reader will automatically read the label and element type together. In addition, some coding methods will create a larger clickable area for the form element which benefits people with motor disabilities.
How to Fix
Fix this issue by using ONE of the following techniques:
- Explicit label: Under most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.
<label for="fname">First Name:</label> <input type="text" name="fn" id="fname">
- Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.
<input type="text" aria-label="search"> <input type="submit" value="Search">
- Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.
<span id="nickname">Nickname:</span> <input type="text" aria-labelledby="nickname">
IMPORTANT: If using aria-labelledby to associate form fields and a table header cell, the table headers/labels must be in <span> elements inside the <th>. It is the <span> element and NOT the <th> element that should have the referenced id. If you place the id on the <th> element, some screen readers will not read the labels correctly when you tab through the form elements.
- Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.
<label>First Name: <input type="text" name="fn"></label>