What are Accessible Forms?

What are accessible forms?

An accessible form can be understood, navigated and completed by everyone, including people using a keyboard, a screen reader, voice control, zoom or switch devices. In practice that means every field has a programmatic label, related fields are grouped, errors are identified in text with a suggestion for fixing them, and the whole form works without a mouse.

What to get right

• Labels. Use a real label element tied to its input with for and id. WCAG 3.3.2 (level A) requires labels or instructions whenever content accepts input, and 1.3.1 (level A) requires the relationship to be programmatically determinable. A placeholder is not a label: it disappears as soon as the user types.
• Grouping. Wrap related controls such as radio buttons in fieldset with a legend, as the W3C techniques for 1.3.1 describe.
• Input purpose. Add the right autocomplete value (given-name, email, tel) so browsers and assistive technology know what a field collects (1.3.5, level AA).
• Errors. Identify the field in error and describe the problem in text (3.3.1, level A), and offer a suggestion when one is known (3.3.3, level AA). Colour alone is not enough.
• Do not make people repeat themselves. Information already entered in the same process should be auto-populated or selectable (3.3.7 Redundant Entry, level A, new in WCAG 2.2).
• Sign-in. Do not block paste or password managers: 3.3.8 Accessible Authentication (level AA) treats forcing people to remember or transcribe a password as a barrier unless an alternative exists.
• Name, role, value. Custom controls must expose the same to assistive technology (4.1.2, level A). See custom input components and ARIA, and prefer native elements first.

Example

<label for="email">Email address</label>
<input id="email" name="email" type="email"
       autocomplete="email" aria-describedby="email-err">
<p id="email-err">Enter an address like name@example.com</p>

The label is announced with the field, the hint is read through aria-describedby, and the browser can autofill. Make sure every control is reachable and ordered logically: see keyboard navigation order.

Common mistakes

• Placeholder text as the only label.
• An error message such as "Invalid input" that does not say which field or how to fix it, or a red border with no text.
• Required fields marked only by colour.
• Disabling paste in password or email confirmation fields.
• Custom dropdowns and date pickers built from div elements with no keyboard support or role.

Testing and monitoring

Automated accessibility testing reliably flags missing labels and missing names, which makes it a good regression check on forms. It cannot judge whether an error message is understandable or the tab order is logical, so also tab through the form and try it with a screen reader. The broader framework is WCAG. LoadFocus page speed monitoring records the Lighthouse accessibility category on a schedule for the pages that hold your forms, so a drop shows up as a trend. It is a monitor, not an accessibility audit. For tools, see this roundup of accessibility testing tools.

FAQ: Accessible forms

Is a placeholder enough as a label?

No. Placeholders vanish when typing, often have low contrast and are not a reliable accessible name. Use a visible label element.

Which WCAG criteria apply to forms?

Mainly 1.3.1, 1.3.5, 3.3.1, 3.3.2, 3.3.3, 3.3.7, 3.3.8 and 4.1.2, plus keyboard operation (2.1.1) and focus visibility.

Should I use ARIA on forms?

Only where native HTML cannot do the job. A native label, fieldset and input already give the right name, role and state. Use ARIA for custom widgets and for linking hints and errors to fields.

How should I show errors?

Say in text which field has the problem and how to fix it, place the message next to the field, and move focus to an error summary or the first invalid field after a failed submit.

Can a tool check form accessibility for me?

It can catch missing labels and names, but not unclear wording or a confusing order. Combine it with manual keyboard and screen reader checks.