| Title | Inappropriate Label Element Check |
|---|---|
| id | label_02 |
| type | decr |
| elem | all |
| test | labelPosNo |
| score | 3 |
| level | A |
| trust | 0.9 |
| top | 1 |
| steps | 1 |
| ref | G162 |
| scs | 1.3.1,3.3.2 |
| dis | 43353 |
| result | failed |
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.
I identified 1 <label> element that is not visible or is incorrectly positioned.
- 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.
To address inappropriate <label> elements:
- Locate the invisible or is incorrectly positioned
<label>element. - Verify whether it has the CSS code
display: none;orvisibility: hidden;and remove it to make it visible. - Verify the label placement, making sure to place it before the
<input>element it labels.