How to Fix Missing Form Labels for Accessibility

What the form labels check tests

SiteCurl scans every <input>, <select>, and <textarea> element on your page and checks whether it has an accessible label. This can be a <label> element, an aria-label attribute, or an aria-labelledby reference. Inputs without any labeling method are flagged.

Why it matters

Screen reader users navigate forms by listening to labels. When an input has no label, the screen reader announces something like “edit text, blank.” The user has no way to know whether the field is for their name, email, phone number, or something else.

Labels also improve usability for all visitors. Clicking a <label> element focuses its associated input, which creates a larger click target. This helps users with motor impairments and anyone on a small touchscreen.

How to fix it

There are four ways to associate a label with an input. Use whichever fits your design.

Method 1: Explicit label with for attribute

The most common and reliable method:

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

The for attribute on the label must match the id on the input.

Method 2: Wrapping label

Wrap the input inside the label element:

<label>
  Email address
  <input type="email" name="email">
</label>

This creates an implicit association without needing for and id attributes.

Method 3: aria-label

When a visible label is not possible (e.g., a search field with only a button):

<input type="search" aria-label="Search the site">

The text is not visible on screen but is announced by screen readers.

Method 4: aria-labelledby

Reference another element’s text as the label:

<h2 id="contact-heading">Contact us</h2>
<input type="text" aria-labelledby="contact-heading" name="subject">

Placeholder is not a label

A placeholder attribute is not an accessible label. It disappears when the user starts typing, leaving them with no reference for what the field expects. Always use a real label in addition to any placeholder text.

How to verify the fix

Use Chrome DevTools: Inspect the input element, look for a <label> with matching for/id, or check for aria-label/aria-labelledby. Run a SiteCurl scan to check all forms across your site automatically.

Related checks

Form labels are one part of accessibility. Also check alt text and heading hierarchy.

Start a free trial to audit form accessibility across your site.