Unique label associations

Silktide checks form labels that name their field using an ID, and reports labels that share the same ID with another label. Each field should have exactly one label pointing at it, so it is always announced the same way.

In , a <label> is linked to its form field by setting the label's for attribute to the field's id. When two or more labels use the same for value, they all claim the same field - usually because a form was copy-pasted and the IDs were never updated.

<!-- Problem: both labels point at id="name" -->
<label for="name">Your name</label>
<input id="name">

<label for="name">Company name</label>
<input id="company">

Why this matters

has to pick which label to announce for the field, and different pick differently - some read the first, some read both. Meanwhile the field the second label was meant for is left with no label at all, so it is announced as an unnamed field. Clicking a label also focuses its field, so a visitor who clicks "Company name" may find themselves typing into the wrong box.

How to fix it

Give every form field its own unique id.
Point each label's for attribute at the ID of the one field it describes:

<!-- Fixed: each label points at its own field -->
<label for="name">Your name</label>
<input id="name">

<label for="company">Company name</label>
<input id="company">

If several pieces of text genuinely describe one field, keep a single <label> and link the extra text with aria-describedby instead of a second label.

How Silktide tests this

Find every <label> element with a for attribute on each page.
Group the labels by their for value.
Where two or more labels share the same value, report every label in the group.

Troubleshooting

The labels are in separate forms

IDs must be unique across the whole page, not just within one form. Two forms that each contain <label for="email"> on the same page still clash - rename the IDs so they differ, for example signup-email and newsletter-email.