What form fields need
Every form field needs a visible label that is tied to the field in the code. Fields for personal details also get autocomplete, so the browser can fill them in.
How it works
A label, label in the code, says what belongs in a field. It is tied to the field when its for attribute points to the field's id. The screen reader then reads “Email, edit text” at the field, and clicking the label puts the cursor in the field. Without that link you only hear “edit text”.
The autocomplete attribute tells the browser what a field expects: email, tel, given-name (first name), family-name (surname), street-address, postal-code, address-level2 (town or city). The browser then fills these fields from saved data. That saves everyone typing and helps people with motor or cognitive impairments most of all.
<label for="email">Email</label>
<input id="email" type="email" name="email" autocomplete="email">WCAG 2.2 requires labels in success criterion 3.3.2 and their link in the code in 1.3.1 and 4.1.2; autocomplete for details about the user is required by 1.3.5.
What matters
- Every field has a label. Search box, newsletter field and drop-downs (
select) too. A label that wraps the field also works. - A placeholder is not a label. Text inside the field (
placeholder) disappears as you type, is often too pale and isn't read out everywhere. It may show an example; the label goes in front. - The id is unique. A label only reaches the first element with that id. If a form appears twice on the page, the fields need different ids (see ARIA references).
- No visible label only by exception. Where the context is clear, such as a search box with a magnifier button, an
aria-labelis enough. Sighted users still benefit from a visible label. - Valid autocomplete values. Only the names from the HTML standard count. An invented value such as
autocomplete="firstname"doesn't help, andautocomplete="off"on name and address takes the help away. - Fitting field types.
type="email"andtype="tel"bring up the right keyboard on phones.
How to set it up
Forms are usually built in a form plugin or page builder. Each field has a setting for its label there; set it to visible rather than hiding it or using only a placeholder. Many plugins have a field for autocomplete in the advanced options; otherwise whoever maintains the template adds it. Forms from newsletter or booking services are adjusted in their own form editor.