Accessible forms that are easier for everyone to fill in

Forms are often the page that matters most: that's where a visitor becomes a customer, a subscriber or a lead. It's also where you lose the most people. A field that doesn't make clear what it expects, an error message that explains nothing, a button you can't reach with the keyboard, and the person gives up.

An accessible form isn't a different form: it's a well-built form, easier for everyone to fill in.

Every field has a visible label#

Example text displayed in an empty field doesn't replace a label. It disappears as soon as you start typing, its contrast is often too low, and many assistive technologies don't read it.

<label for="phone">Phone</label>
<input id="phone" type="tel" autocomplete="tel">

The label's for attribute must match the field's id. As a bonus, clicking the label puts the cursor in the field, which enlarges the clickable area on mobile.

The right type and autocomplete#

The field type changes the keyboard shown on mobile: email brings up the at sign, tel a numeric keypad. The autocomplete attribute lets the browser suggest information already saved, which saves everyone precious time, and even more so people with motor impairments.

<input id="email" type="email" autocomplete="email">
<input id="postcode" type="text" inputmode="numeric" autocomplete="postal-code">

Make required fields clear#

An asterisk alone isn't enough: you need to explain what it means, at the top of the form. In the code, the required attribute informs both the browser and screen readers.

And if most fields are required, it's often clearer to mark the optional ones instead.

Errors that help people fix them#

"Invalid field" doesn't say what to do. A good error message names the field, explains the problem and suggests a solution: "The postcode must contain 5 digits, for example 69003."

For a screen reader to announce this message, link it to the field:

<label for="pc">Postcode</label>
<input id="pc" type="text" aria-invalid="true" aria-describedby="pc-error">
<p id="pc-error">The postcode must contain 5 digits, for example 69003.</p>

When the form is submitted with errors, move the focus to the first one, or to a summary at the top of the page listing each problem with a link to the related field.

Group related choices#

A set of radio buttons asks a single question. Without grouping, a screen reader announces "Yes", "No" without saying what they answer. The fieldset and legend elements solve the problem:

<fieldset>
  <legend>Would you like to receive our newsletter?</legend>
  <label><input type="radio" name="newsletter" value="yes"> Yes</label>
  <label><input type="radio" name="newsletter" value="no"> No</label>
</fieldset>

Test it in five minutes#

Fill in your form without a mouse, using only Tab, Shift+Tab, Space and Enter. Then submit it with errors on purpose. If you always know where you are and what's expected of you, you've already covered the essentials.

Codanalyst automatically spots fields without labels, insufficient contrast and missing attributes across all your forms. Analyze your site to get the list of fixes.