Labelled fields: the three ways Sentinel accepts, and why placeholders aren't one

What a label does that a placeholder can't

It's tempting to save space by putting “Your email” inside the box as placeholder text and leaving out the label. It looks neat in a mock-up. In use it causes problems:

• It disappears. The moment someone starts typing, the hint is gone. Halfway through a form, or after the browser autofills it, people can't check what each box was for.
• It's faint. Placeholder text is usually low-contrast grey, hard to read for many people and easy to mistake for a value already filled in.
• Assistive technology treats it inconsistently. Some screen readers announce a placeholder, some don't, and voice-control users need a stable name to say, such as “click Email”.
• Clicking a label focuses the field. A real label gives a larger target, which matters on phones.

A label fixes all four at once. The design article on web form design best practices covers layout; this check is about the connection between the words and the field.

The three ways Sentinel accepts

The check looks at every input except hidden ones, every textarea and every select. A field passes if any one of these is true:

1. It sits inside a label element. For example, the word Email followed by the input, both wrapped in one label. This is the simplest form and needs no ids.
2. A label points at it. A label with for="email" and an input with id="email", wherever each sits on the page.
3. It has an aria-label. An attribute such as aria-label="Search" gives the field an accessible name without visible text. Useful for a lone search box with a clear button beside it; less good as a habit, because sighted users still see no label.

The Report tab shows “Every field has a label” with the number of fields checked. On a site with several pages, every page's forms are checked, and a failure names the page.

How Anticode's forms are labelled

The design engine uses the first method throughout. In the contact form, Name, Email and Message are each a label wrapping its field, so the visible word and the field can't drift apart. The booking form goes one step further for its choices: the day and time slots are grouped in a fieldset with a legend reading Day or Time, and each slot is a radio button inside its own label showing the date or the time. A screen reader user hears the group name, then each option. The service list is a select inside a label, too. The newsletter and invite forms are a single labelled email field.

Why it's on a security list

Labelling is mainly an accessibility matter, and it might seem odd to find it among Sentinel's twelve security checks. The connection is trust. A form people can't understand is one they fill in wrongly or abandon, and a form that doesn't say plainly what it collects is the kind people are right to be wary of. Sentinel's list covers what a page must get right before it handles anyone's details, and saying clearly what each field is for is part of that. The full list is in the AI website security checklist.

Limits

• It doesn't read the words. A label that says “Field 1” passes. Write labels a person would understand.
• aria-label counts as a pass. The check doesn't require visible text, though visible labels are better for most fields.
• Reported in the builder. This check runs in Sentinel's scan; the server's publish gate doesn't repeat it. Built-in forms always pass, so it matters most when markup has been changed.
• Error messages aren't checked. What a visitor sees when they get a field wrong is a separate design question; see form error messages.

Questions people ask

Why is placeholder text not a label?

It vanishes when someone starts typing, it's usually faint, and assistive technology doesn't treat it reliably. Sentinel doesn't count it.

Is aria-label as good as a visible label?

It passes the form field labels accessibility check and gives screen readers a name, but sighted visitors still see nothing. Use it sparingly, for fields whose purpose is obvious from their surroundings.

Do select menus need labels too?

Yes. Sentinel checks select elements as well as inputs and textareas.