Accessible Form Labels

Accessible form labels ensure every input has a programmatically associated text label that screen readers can announce and users can understand. Proper labeling is fundamental to form accessibility, enabling users to know what information each field requests.

What Are Accessible Form Labels

Form labels are text descriptions that identify the purpose of form inputs. Accessible labels have a programmatic association between the label text and the input element, allowing assistive technologies to announce the label when users focus the input.

WCAG Success Criterion 1.3.1 (Info and Relationships) requires that relationships between labels and inputs be programmatically determinable. Success Criterion 3.3.2 (Labels or Instructions) requires labels when user input is required. Together, these criteria establish the necessity of accessible form labels.

Design systems provide form input components with built-in label associations. A text input component accepts a label prop and renders properly associated markup. This automation ensures correct labeling without requiring developers to understand the underlying techniques.

How Accessible Form Labels Work

The HTML label element creates accessible labels through two association methods. Explicit association uses matching for and id attributes: the label’s for attribute matches the input’s id. Implicit association wraps the input inside the label element.

Explicit association:

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

Implicit association:

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

Both methods create programmatic association that screen readers use. When users focus the input, screen readers announce the label text. Clicking the label also focuses the associated input, providing a larger click target.

aria-label and aria-labelledby provide alternative labeling when the label element cannot be used. aria-label assigns a text string directly. aria-labelledby references another element whose content becomes the label. These should supplement, not replace, visible labels when possible.

Visible labels benefit all users by providing persistent identification of field purpose. Hidden labels using aria-label still provide screen reader access but leave sighted users without identification if they look away and look back.

Key Considerations

• Use the label element with for/id association as the primary method
• Ensure every input has a label, including hidden or implied ones
• Make labels visible to benefit all users, not just screen reader users
• Write clear, concise labels that identify the expected input
• Position labels consistently relative to their inputs
• Do not rely on placeholder text as the sole label
• Test label association by clicking the label to verify it focuses the input

Common Questions

Can placeholder text serve as a label?

Placeholder text cannot replace labels for accessibility. Placeholders disappear when users start typing, removing identification when users may need to reference it. Placeholders lack programmatic association with inputs in the way labels have. Screen readers may or may not announce placeholder text depending on the technology.

Placeholders can supplement labels with format hints or examples, but the label must provide primary identification. Design patterns that use placeholder as the visible label require hidden labels for accessibility, which is a less optimal pattern than visible labels.

How should labels work with inline form patterns?

Inline form patterns that place labels beside inputs rather than above them can work accessibly. The programmatic association (label for/id) remains the same. Visual position does not affect accessibility as long as the association exists.

Compact inline patterns sometimes hide labels visually while maintaining programmatic association. This reduces visual weight but removes benefit for sighted users who may need reference. Consider whether inline patterns with visible labels can work before hiding them.

What about labels for buttons and links?

Buttons and links typically use their visible text content as the accessible name rather than separate label elements. A button containing “Submit” has “Submit” as its accessible name.

Icon buttons without visible text need aria-label to provide accessible names. The labeling concept applies, but the mechanism differs from form inputs. Links similarly use their text content, with aria-label available for icon links.

Summary

Accessible form labels provide programmatic association between descriptive text and form inputs through the label element or ARIA attributes. Visible labels that clearly identify expected input benefit all users while meeting accessibility requirements for screen reader users.