Avoid labels on non-labelable controls
Silktide checks form labels that point at another element by ID, and reports labels aimed at elements that should not have one - buttons, button-like inputs, and elements that cannot take a label at all. These elements are named by their own text or value, and a separate label creates conflicting names.
In , a <label> names a form field via its
for attribute. But some controls already carry their own name: a button's
name is its text, and a submit input's name is its value. Other elements,
such as a plain <div> or a hidden input, cannot be labeled this way at all.
<!-- Problem: the button already says "Save"; the label competes with it -->
<label for="save">Save</label>
<button id="save">Save</button>
Why this matters
When a control has two sources for its name - its own text and a label pointing at it - different browsers and resolve the conflict differently. The control may be announced twice, announced by the wrong text, or behave unexpectedly when the label is clicked. Removing the redundant label makes every visitor hear exactly what the control says.
How to fix it
- For buttons and button-like inputs, remove the
<label>and rely on the control's own text orvalue:
<!-- Fixed: the button names itself -->
<button id="save">Save</button>
<input type="submit" value="Submit">
- For a label pointing at a hidden input, remove the label - hidden fields are never shown or announced, so they need no name.
- If you were labelling a non-form element such as a
<div>acting as a custom control, use instead: give the elementaria-labelledbypointing at the text that names it.
How Silktide tests this
- Find every
<label>element with aforattribute on each page. - Look up the element whose
idmatches. Labels pointing at IDs that don't exist are skipped here - they are reported by Valid label IDs instead. - Report the label when its target is one of:
- a
<button>element, - an
<input>with typebutton,submit,reset,image, orhidden, - any element that cannot take a label, such as a
<div>or a heading.
- a
- Labels pointing at ordinary fields - text inputs,
<select>,<textarea>, and similar - pass.