How to fix missing form labels

WCAG: 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value · Updated October 14, 2026

When a form field has no programmatic label, a screen reader announces only “edit text”. Contact forms, newsletter signups, search boxes and checkout fields are where this shows up most.

The reliable pattern

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

The for value must match the input id, and IDs must be unique on the page. Clicking the label then also focuses the field, which helps everyone.

Placeholders are not labels

Placeholder text disappears when you type, is often low contrast, and is not reliably announced. Keep a visible label; use the placeholder only for an example format.

Special cases

• Search boxes with no visible label: add aria-label="Search" or a visually hidden label.
• Checkbox and radio groups: wrap them in <fieldset> with a <legend> for the question.
• Errors: connect messages with aria-describedby so they are read with the field.
• Autocomplete: add valid tokens such as name, email, tel, street-address so browsers can fill them.

Form plugins

In WordPress form builders (Contact Form 7, Gravity Forms, WPForms), make sure the label setting is not set to “hidden” without a screen-reader alternative. Many have a “screen reader only” label option.

Step by step

1. Find unlabeled fields. Scan the form page and review the label results.
2. Add labels. Give each field a visible label tied to its id.
3. Group related options. Wrap radio and checkbox groups in a fieldset with a legend.
4. Re-scan and test. Re-scan, then tab through the form with a screen reader.

Automated accessibility scan. Results are informational and may not identify every accessibility issue. This service is not legal advice, a compliance certification, or a substitute for comprehensive manual accessibility testing.