What is an orphaned form label?
Question
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 RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.