Form fields without a label on Lovable
What this is
3 form fields have no label. Screen reader users do not know what to type, and clicking the text does not focus the field.
Who it affects
- Screen reader users
- People with motor disabilities
- People with cognitive disabilities
Standards
How to fix it
- Add a `<label for="…">` whose `for` matches the input's `id`.
- Placeholder text is not a label – it disappears while typing.
- If the design must hide the label, hide it visually (not with `display:none`) or use `aria-label`.
Example
Before
<input type="email" id="email" name="email">After
<label for="email">TODO: field name</label>
<input type="email" id="email" name="email">Replace the TODO with the real field name. If the design hides labels, hide it visually (a "visually-hidden" class) instead of removing it.
On Lovable
Ask the builder to add a visible `<label>` connected with `htmlFor`/`id` to every form field, instead of placeholder-only inputs.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.