The “Inappropriate Label Element Check” evaluates whether there is any <label> element that is either not visible to users or incorrectly positioned, making it unclear what field it refers to.
Example outcome
I identified 1 <label> element that is not visible or is incorrectly positioned.
Impact
Visual Impairments: Users with visual impairments may hear the input field without a meaningful label, making it unclear what they’re filling in (especially in forms with multiple fields like “First name” and “Last name”).
Cognitive Disabilities: Without a clearly visible and positioned label, the form loses critical context. This can increase confusion and cause form abandonment.
Fixes
To address inappropriate <label> elements:
Locate the invisible or is incorrectly positioned <label> element.
Verify whether it has the CSS code display: none; or visibility: hidden; and remove it to make it visible.
Verify the label placement, making sure to place it before the <input> element it labels.