Inappropriate Label Element Check

Description

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:

1. Locate the invisible or is incorrectly positioned <label> element.
2. Verify whether it has the CSS code display: none; or visibility: hidden; and remove it to make it visible.
3. Verify the label placement, making sure to place it before the <input> element it labels.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2: Understanding Success Criteria 3.3.2
• WCAG 2.2 Techniques: Technique G162: Positioning labels to maximize predictability of relationships
• WebAIM: Semantic Structure: Regions, Headings, and Lists
• WebAIM: Creating Accessible Forms