Valid label IDs for fragments

Silktide checks form labels that refer to another element by ID, and reports labels whose ID does not exist anywhere on the page. A label that points at nothing cannot name anything.

In HTML, a <label> names a form field by setting its for attribute to the field's id. This check verifies only that the referenced ID exists somewhere on the page - a companion check, Valid label IDs, goes further and verifies the target is a form field that can take a label.

<!-- Problem: nothing on the page has id="food" -->
<label for="food">Favorite food</label>

Why this matters

A label with a broken reference does nothing: a screen reader cannot connect it to any field, so the field the label was meant for is announced without a name, and clicking the label no longer focuses it. Because the page looks unchanged, these breaks typically appear silently when IDs are renamed or markup is restructured, and only automated checking catches them.

How to fix it

1. Find the element the label was meant to describe and set the label's for value to that element's exact id (IDs are case sensitive):

<!-- Fixed: the label points at a real ID -->
<label for="food">Favorite food</label>
<input type="text" id="food">

2. If the target element is missing its id, add one.
3. If the label is a leftover that no longer describes anything, remove it.

How Silktide tests this

1. Find every <label> element with a non-empty for attribute on each page.
2. Look for an element anywhere on the page whose id matches.
3. Report the label if no such element exists.

Learn more

• Understanding Success Criterion 1.3.1: Info and Relationships (WCAG 2.2)
• The label element (MDN)
• Valid label IDs