Before · critical finding
Input has no accessible name
<input type="email" name="email" placeholder="Email address">The placeholder hints at the field's purpose, but it does not supply the persistent visible label relationship this control needs.
Accessibility issue guide · form labels
Give every form field a name people and software can understand.
A visible placeholder is not a dependable label. ClearSite can flag form controls without an accessible name, show the affected element and help you verify the source-level repair.
Check a form page freeNo signup. Test the live page users receive.
Why the label matters
The field needs a persistent, programmatic name.
People need to know what information a form expects. Screen readers announce a control's accessible name, while a visible label also helps people using magnification, voice input or a pointer understand and target the field.
Placeholder text disappears when someone types, may be low contrast, and does not create the same dependable label relationship. Instructions such as required formats or error recovery also need to remain available when they matter.
Primary guidance: the W3C WAI labelling-controls tutorial and its explanation of WCAG 2.2 labels or instructions.
Controlled fixture · axe-core 4.11
One missing label. One tested repair.
We tested the same small newsletter form before and after a visible label was connected to the email input. The unlabelled version returned one critical axe label finding; the repaired fixture returned zero axe violations.
After · re-test clear
Visible label is tied to the input
<label for="newsletter-email">Email address</label>
<input id="newsletter-email" type="email" name="email">Matching for and id values create the programmatic relationship and make the visible label clickable.
This is a controlled fixture, not customer data or a compliance claim. The automation boundary and rule logic are documented in the axe-core label rule explanation.
Three repair patterns
Choose the simplest name that stays clear in context.
Use a visible label when you can
Match the label's for attribute to the field's id. The name remains visible, clickable and available to assistive technology.
<label for="email">Email address</label>
<input id="email" type="email">Use aria-labelledby for existing visible text
When another element already provides the visible name, reference its id. Keep the relationship unique and test the rendered control.
<span id="search-label">Search products</span>
<input aria-labelledby="search-label" type="search">Use aria-label only when no visible label fits
An aria-label can name a compact control, but it is invisible to sighted users. Prefer visible instructions for fields that need explanation.
<input aria-label="Search products" type="search">From finding to verified fix
Repair the shared source, not just the one page.
- 01
Confirm the affected control
Open the rendered page and locate the exact input, select or textarea reported by the scan. Do not fix a similar-looking component by assumption.
- 02
Find the shared source
If the same field fails across many pages, inspect the reusable form component, template, theme section or app block before patching individual pages.
- 03
Add a stable accessible name
Use a visible label tied to a unique field id where possible. Keep necessary format, required-state and error instructions visible as well.
- 04
Re-scan the same URL
Publish or preview the source change, then run the page again and confirm the label finding has cleared from the rendered result.
- 05
Test the whole form manually
Navigate with a keyboard, check focus order, trigger validation, and confirm instructions and errors make sense with assistive technology.
What ClearSite can detect
Controls that axe-core can determine have no accessible name, with the affected rendered element and rule attached to the finding.
What a re-scan can prove
Whether that machine-detectable finding clears after the changed form is rendered on the same live page.
What still needs a person
Whether labels and instructions are understandable, errors are useful, focus order works and the whole form can be completed.
ClearSite is a diagnostic scanner and guidance tool. It does not determine WCAG conformance or provide legal advice. Read the full automated accessibility testing workflow and limits or see how the same issue can appear in a Shopify theme, app or content source.
Check the form people use to contact or buy from you.
Run the page free, fix the source, then re-scan the rendered result.
Find unlabelled form fields