Form fields without a label

What it is

One or more form fields on the page, such as text boxes, checkboxes or drop-downs, have no label tied to them in the code. A word printed next to a field is not enough: the label has to be connected, by wrapping the field in a <label>, pointing a <label for> at the field’s id, or with an aria-label. Placeholder text inside the box is not a label; it disappears as soon as someone types.

Why it matters

A field with no name at all is announced only by its type, such as “edit text” or “checkbox”. Browsers fall back to the placeholder as a name, but it disappears from view once typing starts, and voice control users may not be able to name the field to select it. AI agents that fill in forms read the same labels: OpenAI asks sites  to label forms with ARIA so its agent in ChatGPT Atlas can use them. A field with no name fails WCAG 4.1.2 Name, Role, Value  (Level A), and since June 2025 the European Accessibility Act requires many businesses selling to consumers online in the EU to meet it.

How Asky checks it

Asky reads the page’s raw HTML and checks every <input>, <select> and <textarea>, not forms added by scripts. A field is labeled by a <label> with text that wraps it or names its id in for, a non-empty aria-label or title, or an aria-labelledby whose target has text; placeholder does not count. Skipped: inputs of type hidden, submit and reset, types button and image (checked as buttons), and fields inside aria-hidden="true", hidden, <noscript> or <template>, or inline display: none or visibility: hidden. One issue per page gives the count and up to 20 examples.

Reported as an error with high severity.

How to fix it

1. Find the fields listed in the issue. Each example shows the field’s HTML.
2. Give each field a visible label that is connected in code: wrap the field in a <label>, or give the field an id and the label a matching for. In most form builders, filling in the field’s label setting does this; a field that shows only a placeholder usually has its label switched off or left empty.
3. Where the design has no room for visible text, such as a lone search box, add an aria-label that says what to enter (“Search the blog”).
4. Put real text in every label. An empty <label> does not count as a label, so the field is still reported.
5. For a group of radio buttons or checkboxes, label each option and wrap the group in a <fieldset> whose <legend> asks the question.
6. A spam trap field hidden by your stylesheet is still read out by screen readers. Wrap it in an element with aria-hidden="true" and give the field tabindex="-1", which also clears this check.
7. To leave it as it is: if a flagged field is hidden from everyone by your stylesheet and never shown, such as an unused form variant, mark the issue resolved.

Example

The newsletter form on https://example.com/blog relies on a placeholder:

<!-- Before: the placeholder is the only name, and it vanishes as the visitor types -->
<input type="email" name="email" placeholder="Your email">
 
<!-- After: announced as "Email address" -->
<label for="newsletter-email">Email address</label>
<input type="email" id="newsletter-email" name="email">

← Back to Accessibility