Valid label IDs

Silktide checks form labels that name their field using an ID, and verifies that the ID exists on the page and belongs to an element that can actually take a label. A label pointing at nothing, or at the wrong kind of element, silently leaves a field unnamed.

In , a <label> is connected to its form field by setting the label's for attribute to the field's id. The connection breaks when the ID is mistyped, when the field's ID changes, or when the target isn't a form field at all.

<!-- Problem: no element with id="fullname" exists -->
<label for="fullname">Full name</label>
<input type="text" id="full-name">

Why this matters

The label is how a announces a field. When the for reference is broken, the label and the field are two unrelated elements: the visitor hears an unnamed "edit text" and has to guess what belongs in it. Nothing changes visually - the label still sits next to its field - so these breaks go unnoticed until someone who depends on the connection tries to use the form.

How to fix it

Find the field the label was meant for, and make the label's for value match the field's id exactly (IDs are case-sensitive):

<!-- Fixed: the reference matches the field's id -->
<label for="full-name">Full name</label>
<input type="text" id="full-name">

If the label points at something that cannot take a label - such as a <div> acting as a custom control - use instead: give the element aria-labelledby pointing back at the text that names it.
If the label is a leftover with no field, remove it.

How Silktide tests this

Find every <label> element with a for attribute on each page.
Look up the element whose id matches the for value.
Report the label if no such element exists.
If it exists, report the label if the target is not a labelable form element - a button, input (other than hidden), drop-down, text area, meter, output, or progress bar.

Troubleshooting

The field is added by scripts

Silktide examines each page as rendered. If the target field only exists in some states of the page - after opening a panel, for example - the label's target may be missing when tested. Consider rendering the label and its field together.