Your contact form looks understandable because Email appears inside the field. Then someone starts typing and the instruction disappears. A missing-label warning is a reason to inspect that exact control, not to replace the whole form.
Start with the signup, contact, or demo form on the page visitors actually use. The practical goal is simple: every person should be able to identify each field before entering information and while checking what they entered.
- Find
- A field whose purpose disappears or is not announced.
- Fix
- Connect a persistent, descriptive label to that control.
- Verify
- Check the name, label click, and completed form.
Start with these checks
Check the rendered field
Inspect the published form, including embedded widgets and mobile variants.
Keep the purpose visible
Type into each field and confirm its label remains readable.
Check the connection
Confirm the label targets the intended control, including repeated forms.
Confirm whether the label is missing or disconnected
Inspect the field in browser developer tools and check its computed accessible name. Nearby text can look like a label without being connected to the input. W3C recommends associating labels with controls; a visible label is usually the clearest choice.
Do not treat placeholder text as the fix. It can provide an example format, but it disappears when the field has a value. Keep instructions such as the expected email format separate from the field name.
Add one real label before changing the layout
Give the input a unique id and connect a label using the same value in its for attribute. Preserve the existing field name, validation, and submission behavior. In JSX, the label prop is htmlFor. If the form repeats in a footer or dialog, its ids must still be unique.
For a builder or embedded form, first use its label setting and inspect the published result. If the provider controls the markup, fix the field in that provider rather than placing unrelated text over the embed.
Illustrative email field
Before
An empty input displays only the placeholder Work email.
Suggested change
Work email appears above the field; alex@example.com appears as the optional format hint inside it.
Original worked example. Use the label that matches the information your form actually requests.
<label for="contact-email">Work email</label>
<input id="contact-email" name="email" type="email"
autocomplete="email" placeholder="alex@example.com">Check the filled state, not just the empty screenshot
Click the label and confirm the correct input receives focus. Tab through the form and use a screen reader to check that the field purpose is announced. Enter values, trigger an existing validation error, and inspect the mobile layout so the new label does not overlap feedback.
Run the same page audit again to check the reported issue. This is one form fix, not an accessibility certification: keyboard behavior, error recovery, contrast, and the rest of the page still need their own checks.
Turn the diagnosis into a change
Take the next step
Inspect the form on [page URL]. Identify inputs with missing or disconnected labels. Add persistent, descriptive labels with unique ids and matching associations. Preserve field names, validation, submission, and existing integrations. Check repeated forms, mobile layout, keyboard focus, and computed accessible names. Report the exact controls changed and anything the embedded provider prevents you from fixing.
Use these instructions with your developer or coding assistant.
Questions before you change it
Does a placeholder count as a form label?
Do not use it as the replacement for a label. Keep a persistent field name and reserve the placeholder for an optional example.
Can I fix the warning with aria-label?
It can supply an accessible name, but it does not add a visible label. Prefer a connected visible label for ordinary contact and signup fields.
Does adding labels make the form fully accessible?
No. Labels address one issue. Check keyboard operation, instructions, errors, and successful submission separately.
Make the next fix about your page.
Paste one public page to get a free audit preview. See the priorities, then decide whether to unlock the full report and implementation brief.