DEV Community

Kai Mercer
Kai Mercer

Posted on

Label your form fields: a two-minute check before you ship

#webdev #a11y #html

Forms are where landing pages make or lose a signup, and a missing label is one of the easiest problems to ship without noticing. It looks fine. Everything works with a mouse. But a screen reader user lands on a box that says "edit text" and has to guess.

This is a two-minute check you can run on any form.

What a label actually does

According to MDN, a label is not only visually next to its input. It is programmatically associated with it, so a screen reader reads the label out when the input gets focus. It also gives you a bigger target: clicking or tapping the label passes focus to the input, which helps on touch screens.

So a label is both an accessibility feature and a usability one.

The check

  1. Click the label text. Does the cursor land in the field? If nothing happens, the label is not connected to the input.
  2. Tab through the form with the keyboard. Each stop should tell you what it is. If a screen reader is handy, turn it on. If not, open the browser's accessibility inspector, select the input and look at its accessible name. It should not be empty.
  3. Type something into each field. If the only hint about what the field is lived inside the box and disappeared when you typed, there is no label.

Wiring it up

Explicit association uses for and id:

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">
Enter fullscreen mode Exit fullscreen mode

You can also nest the input inside the label, and then for and id are not needed:

<label>Email <input name="email" type="email"></label>
Enter fullscreen mode Exit fullscreen mode

MDN notes that most browser and screen reader combinations support the nested form, but not all assistive technologies do. It recommends explicit association with for, and says you can do both for maximum compatibility.

Things to avoid

  • Headings inside a label. MDN says this interferes with many kinds of assistive technology, because headings are used for navigation. If you want the label to look different, style it with a class.
  • Labelling buttons. An input with type="button" and a value does not need a label, and adding one can get in the way.
  • Duplicate ids. If two inputs share an id, the label can attach to the wrong one. Search the page for repeated ids after you add a form section.

Labels and instructions

WCAG 2.2 success criterion 3.3.2 (Labels or Instructions) says labels or instructions should be provided when content needs user input. W3C adds that this also covers data formats when they are unusual or have specific rules, and that the goal is enough information to finish the task without clutter. A short hint under the field ("8 characters or more") is fine. A paragraph is usually too much.

Run the three checks again whenever someone adds a field. It is the kind of thing that breaks quietly in a redesign.

Sources: label element on MDN and Understanding SC 3.3.2: Labels or Instructions (W3C).

Top comments (0)