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"

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.