We detected a form field with a visible description that is not announced
| Field | Value |
|---|---|
| Rule code | Manual_FormField_Description_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
When a form field has a visible description or additional information provided near the form field; ensure that the additional information is programmatically linked and associated with its corresponding form field. Without associating additional context provided, users utilizing Screen Reader navigation are unlikely to be made aware that there is additional context for the form field. Proper association of additional information to each of the respective form fields ensures that all users, including those using assistive technologies, can understand any additional context needed in order to give an accurate response.
How to fix
When a form field has a visible description or additional information near it to help give context to users, programatically associate the description with the form field by utilizing the aria-describedby attribute:
<input id="address" aria-describedby="address-description">
<label for="address">Address</label>
<p id="address-description">Orders cannot be shipped to PO boxes.</label>