What is an orphaned form label?
Question
When using the Wave Scanner to repair my website I saw the warning "Orphaned Form Label", with the description was “a form label is present but it is not correctly associated with a form control”. What is this?
Answer
This warning refers to form labels that exist in the web pages markup but is not appropriately associated with a corresponding field. Best practice dictates that within a form every input element has a matching label element, this can be done by attributing the for field of the label with the same element id of the desired input.
How to resolve this:
Consider the following markup, this code passes accessibility scanners:
<form> <label for="name">Your Name:</label> <input id="name" type="text" placeholder="Enter your Name"> <input type="submit" value="Submit"> </form> Note:
- The text-input field has the id parameter "name"
- The label field associated with the text field has the for parameter "name"