Form fields without a label

A screen reader announces a field by its label: "Email, edit text". Without one it says "edit text" and the visitor has to guess what to type. A label is also a bigger target: clicking it focuses the field, which matters on a phone and to anyone whose hands shake.

A placeholder is not a label. It disappears as soon as someone types, it is usually too pale to read, and not every screen reader announces it. The search box and the newsletter sign-up are where this turns up most: one field, an icon, no label.

A title attribute does give the field a name, so we don't flag it, but it shows only on hover with a mouse. Prefer a real label.

Sources: WCAG 2.2, 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions and 4.1.2 Name, Role, Value (all Level A).

Give every field a <label> whose for matches the field's id:

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

Where the design really has no room for visible words (a search box with a magnifying-glass button), name it with aria-label:

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