Reviewed November 8, 2026

Your Search Box Has No Label: The Unnamed Fields Every Storefront Ships

The search box has a magnifying glass and the word Search in light grey inside it. The newsletter field has your email address in light grey inside it. Both look finished. Neither has a label, and both fail the same criterion.

Placeholder text is not a label. It disappears the moment the user types, it is not announced reliably as a label by screen readers, and the guidelines say so plainly. The fix is a visible label or an aria-label, and the stores that skip it are usually the stores that never watched a screen reader user try to find the search box.

The fields that are always unnamed

Search is the worst. Most storefronts put a magnifying glass icon next to a bare input, or inside it, and call it done. A screen reader user tabbing to it hears edit text, blank, and has no way to know it is the search. The icon is visible to sighted users and invisible to everyone else, which is the definition of a decorative element doing a labeling job.

The newsletter signup is second. A bare input with placeholder text that says your email address is the whole field, and the placeholder vanishes on the first keystroke. The user who tabs away and back cannot tell what the field is for, and the user who types slowly watches the instruction disappear while they are still reading it.

The third is the quantity stepper and the filter controls on collection pages. A minus button, a plus button, and a number with no label are three controls a screen reader cannot distinguish, and the filter dropdowns are often built from divs with no label at all. All three fail WCAG 3.3.2 Labels or Instructions, which requires labels or instructions for user input, and 4.1.2 Name, Role, Value, which requires the name to be exposed to assistive technology.

What a label actually is

A label is a visible text element tied to the field with a for attribute, or an aria-label on the field itself. The visible label is better, because it helps sighted users too: a person with a cognitive disability, a person in a hurry, and a person on a small screen all benefit from seeing what a field is for without guessing.

The accessible name is what the screen reader announces, and it can come from the label, from aria-label, or from aria-labelledby pointing at another element. A field with aria-label Search has an accessible name and passes the letter of the criterion, but a field with a visible label that says Search passes the spirit too. When in doubt, use the visible label. It is the one that helps everyone.

The placeholder trap, and the floating label question

Placeholder text has three problems, and they stack. It disappears when the field is filled, so the user cannot check what the field was for. It is styled in low contrast grey, so it fails contrast requirements on many themes. And it is not reliably exposed as a label, so the screen reader may announce nothing at all. The guidelines treat placeholder as a hint, not a label, and a hint cannot replace a label.

Floating labels are the compromise most themes use: the label starts inside the field and moves above it when the field has content. They pass as long as the label stays visible once the field is filled. A label that disappears entirely when the user types is a placeholder with a costume on, and it fails the same way. The test is simple: fill the field, look away, look back, and ask whether you can still tell what it is for.

Frequently asked questions

Is placeholder text a label?

No. Placeholder text disappears when the user starts typing, it is not announced reliably as a label by screen readers, and it fails WCAG 3.3.2 Labels or Instructions. A visible label or an aria-label is required, and the placeholder can stay as a hint.

Does a search icon next to the field count as a label?

No. An icon is not a label unless it is exposed as one. A search field needs a label, visible or programmatic, that says Search. The magnifying glass icon is decoration, not a name.

What is the difference between a label and an accessible name?

A label is the visible text next to a field. An accessible name is what assistive technology announces, and it can come from a label, an aria-label, or aria-labelledby. A field can have an accessible name without a visible label, but a visible label is better, because it helps everyone, not just screen reader users.

Do floating labels pass?

A floating label that starts inside the field and moves above it when the field has content can pass, as long as the label stays visible once the field is filled. A label that disappears entirely when the user types fails, because the user can no longer tell what the field is for.