Label every form field

Place a visible label beside each field and connect it directly to the input.

Why it matters

Without a persistent label, people may not know what information a field expects. Placeholder text disappears as soon as they start typing.

How to fix it

1. 1

   Write a short visible label that names the requested information.

2. 2

   Match the label’s for value to the input’s id.

3. 3

   Keep help text and error messages separate from the label.

Example

<input type="email" placeholder="Email address" />

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

How to check your fix

Check your page again with ibin. The issue disappears from your report once every place is fixed. Then try it yourself the way a visitor would.

• Check the page again and make sure the issue no longer shows up in your report.
• Try the fixed part yourself: with a mouse, with only a keyboard, and zoomed in.
• If you can, ask someone who uses a screen reader to try it too.

Also available in Nederlands, Français, Deutsch