Glossary / Form labels

Form labels

Form labels tell users what information a control expects and provide its accessible name. A properly associated HTML <label> is announced by assistive technology, enlarges the clickable area for many controls, supports voice input, and creates a visible relationship. Placeholder text is not a durable label: it disappears during entry, often has weak contrast, and may not be exposed consistently. Good forms pair labels with instructions, grouping, input purpose, and clear error feedback.

Labeling patterns

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

• Explicit association: for must exactly match a unique control id. Implicit association wraps the input inside the label; explicit is often easier to maintain.
• Use <fieldset> and <legend> to label related controls such as a radio group. A heading alone is not a programmatic group label.
• Instructions such as format or required state can be connected with aria-describedby; the label should remain concise and identify the field.
• Keep visible label text consistent with the accessible name (WCAG Label in Name). Avoid labels that only say “Enter here” or rely on color/position.
• aria-label/aria-labelledby may label controls when native visible labels are impractical, but hidden-only names are harder for visual users and speech users.
• Choose suitable input types and autocomplete tokens to improve mobile input and programmatic identification of common personal-data fields.

Validation and common failures

Mark required fields clearly in text and programmatically. On submit, preserve entered values, identify each error in text, associate it with its control, and explain how to fix it. Do not use placeholder as the only label, put unrelated text inside a label, duplicate IDs, or use title as the sole fallback. Visually hidden labels are useful when the visual context is unmistakable, but visible labels generally serve more users.

Interview questions

1. Why not use placeholder as a label? It disappears, may have low contrast, and does not reliably provide persistent instructions or label behavior.
2. How do you associate a label? Use a <label for> matching a unique control id, or wrap the control in the label.
3. How do you label a radio group? Group related inputs in a <fieldset> with a meaningful <legend> and label each option individually.
4. When use aria-describedby? For supplemental instructions or error text, not as a substitute for the control’s name.
5. How do labels aid users without screen readers? They clarify purpose, enlarge clickable areas, support speech input, and remain available when a user forgets placeholder hints.

References

• WAI Forms Tutorial: Labeling Controls
• WAI Forms Tutorial: Grouping Controls
• WAI Forms Tutorial: User Notifications