Form fields without labels.

The problem

Forms are where conversions happen—sign-ups, checkouts, contact requests—so an unlabeled form is a direct loss of business and a top ADA-lawsuit target. Without a programmatic label, a screen reader announces an input as just “edit text,” giving no hint whether it wants an email, a password, or a phone number. Placeholder-only forms look fine to sighted users but are an invisible wall for assistive-technology users and people with cognitive disabilities.

The fix

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Submit</button>

<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email">

<label for="password">Password</label>
<input id="password" type="password" autocomplete="current-password">

<button type="submit">Sign in</button>

Step by step

1. 1Add a <label> element with a for attribute matching the input's id.
2. 2Or use aria-label="Email address" on the input directly.
3. 3Do not use placeholder as the only label — it disappears when the user types.
4. 4Group related inputs with <fieldset> and <legend> (e.g., radio button groups).

Common mistakes

• ×Using placeholder text as the only label (it disappears on input and often fails contrast).
• ×Adding a <label> but forgetting the for/id association.
• ×Labeling a group of radios or checkboxes without <fieldset>/<legend>.
• ×Hiding labels with display:none, which also hides them from screen readers.

How to test for it

• Click each field’s label—focus should move to the input, which proves the association.
• Tab through the form with a screen reader and confirm each field announces its purpose.
• Run an automated scan for inputs missing an accessible name.

In your framework

// React — associate label and input
<label htmlFor="email">Email</label>
<input id="email" type="email" />

Questions