Inspect the working example
Display name is the field label. A separate hint explains the example, but it is intentionally not connected as a programmatic description yet. This lets us distinguish a label association from nearby prose.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Explicit association | Compare label for and input id | Both are display-name; input.labels has one label |
| Label click | Click Display name | Focus moves to the display-name input |
| Nearby hint | Inspect aria-describedby | It is absent; the hint is not an associated description yet |
Follow the browser mechanism
for resolves to the matching labelable control ID in the same tree. It provides a label association, including a native click route to that input. A placeholder is not a substitute for the persistent visible label. If the hint must be associated, add aria-describedby="hint" to the input without changing the label binding.
A mismatched for value breaks the association
Here the label names display-name but the input ID is display-name-other. No matching control is identified by the label.
<label for="display-name">Display name</label><input id="display-name-other" type="text">input.labels has length zero and clicking the label does not focus that input. The working fixture has one label and the expected focus target.
Try the repair
You rename the input ID to note-name. Which other attribute must you update, and how do you keep the hint association?
Show the worked answer
Update label for to note-name. Keep aria-describedby="hint" if you add the hint association; that value references the hint ID, not the input ID.
- Check input.labels and the actual activeElement after a label click.
- Check the input name separately from its associated description.