Field labels
Silktide checks that every form field and button on your pages has a name that software can read. People who cannot see the form rely on these names to know what each field is asking for.
A sighted visitor works out what a field means from the text near it. That
visual association carries no meaning in code: the name must be attached to
the field itself, most often with a <label> element in the
.
<!-- Problem: the text looks like a label but isn't attached to the field -->
<p>Full name</p>
<input type="text">
Why this matters
A announces each field by its as the visitor moves through a form. An unnamed field is announced as just "edit text" - the visitor has to guess what to type from context, and on a longer form that quickly becomes impossible. Unlabelled fields are one of the most common reasons a form cannot be completed without sight, which means lost sign-ups, orders, and enquiries.
How to fix it
- Attach a
<label>to each field, either linked by ID or wrapped around it:
<!-- Linked by ID -->
<label for="name">Full name</label>
<input type="text" id="name">
<!-- Or wrapped around the field -->
<label>Full name <input type="text"></label>
- Buttons name themselves through their text or
value- no label element is needed:
<button>Send message</button>
<input type="submit" value="Send message">
- Where a visible label is impractical, use an
attribute such as
aria-labeloraria-labelledby. Note this only helps - sighted visitors won't see it.
Do not rely on placeholder text as a label: it disappears as soon as the
visitor starts typing, and is not treated as a name consistently.
How Silktide tests this
- Find the form controls on each page: inputs, text areas, dropdowns, and
buttons, plus elements given a form control role with ARIA (such as
role="button"orrole="checkbox"). - Skip controls that don't need a name: hidden inputs, fields injected by known third-party widgets (such as services, or the hidden forms that tracking and translation scripts add for their own use), and elements whose ARIA role does not require a label.
- Work out each control's accessible name from its label, ARIA attributes, button text, or value.
- Report each control whose accessible name is empty.
Troubleshooting
The field has text next to it
Nearby text does not name a field unless it is connected in code - use a
<label> with a for attribute, or wrap the field in the label.
The field is decorative or managed by a plugin
Fields injected by widgets you don't control can be hard to fix directly. Check whether the plugin offers an accessibility setting or an update; if the field genuinely doesn't affect visitors, you can the finding.