Form Label Association

Explicitly associating a `<label>` with a form control gives the control an accessible name and helps screen readers communicate what the field is for. It also makes the label clickable, improving usability for mouse and touch users.

A label should be programmatically connected to its associated form control. The most common approach is to give the control a unique `id` and set the label's `for` attribute to the same value. This creates an explicit association that assistive technology can recognize.

For example, `<label for="email">Email address</label>` paired with `<input id="email" type="email">` tells a screen reader that the text "Email address" names that input. The `for` value must match the control's `id`, not its `name` attribute.

A label can also wrap its control, such as `<label>Email address <input type="email"></label>`. This creates an implicit association. Explicit association using matching `for` and `id` attributes is often preferred because the relationship is clear in the markup and works well when the label and control are not adjacent.

The accessible name is especially important when the visible UI uses placeholders, icons, or surrounding text that does not reliably identify the field. A placeholder is not a substitute for a label because it can disappear as the user enters a value and does not provide the same persistent context.

Key points

• Match `label[for]` with the control's `id`.
• Use a unique `id` for each labeled control.
• Do not rely on `placeholder` text as the field's label.
• Labels can be associated explicitly or by wrapping the control.
• Correct labeling gives assistive technology a meaningful accessible name.

Interview questions

How do you associate a label with an input in HTML?

Give the input a unique `id` and set the label's `for` attribute to that exact ID. For example, `for="email"` pairs with `id="email"`. This creates an explicit programmatic relationship that assistive technologies can use.

Why is a label important for screen-reader users?

A label provides the form control with a meaningful accessible name. A screen reader can announce that name when the user navigates to the control, allowing the user to understand what information is expected. Without a proper label, the control may have an unclear or missing name.

What is the difference between explicit and implicit label association?

Explicit association uses a label's `for` attribute and a control's matching `id`. Implicit association occurs when the control is nested inside the `<label>` element. Both establish a label relationship, but explicit association makes the relationship visible in the markup even when the label and control are separate.

Why shouldn't a placeholder replace a form label?

A placeholder is temporary hint text and normally disappears once the user enters a value. That can remove useful context while the user is reviewing or correcting the field. A real label remains associated with the control and provides a stable accessible name.

When might you use `aria-label` instead of a visible `<label>`?

`aria-label` can provide an accessible name when there is no suitable visible label, such as for certain icon-only controls. For ordinary form fields where a visible label is appropriate, a native `<label>` is generally preferable because it serves both accessibility and visual usability. ARIA should complement native semantics rather than unnecessarily replace them.