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"