Documentation/Form controls require labels

Form controls require labels

ZMD005

Ensure every input, select, and textarea has an accessible name via a <label>, aria-label, or aria-labelledby.

✅ Good

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

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

❌ Bad

<input type="email" name="email">

Framework differences: React/JSX/TSX uses htmlFor, while Vue/HTML uses for.

When: Input, select, or textarea lacks a matching <label> or ARIA name

Warning: Form control missing id or accessible label

Solution: Give the element an aria-label, aria-labelledby, or reference a <label for> to provide an accessible name

Why it matters

Accessibility: Unlabeled controls are announced as “edit” or “button” without context, making forms unusable for screen-reader users.

SEO: Search engines lose semantic context for form fields, reducing discoverability for interactive page elements.

In brief

  • Goal: Make form controls programmatically identifiable by assistive technologies.
  • What to do: Associate each control with a visible <label> (using for/id) or provide an aria-label/aria-labelledby when no visible label exists.
  • Why: Labels enable screen-readers to announce field purpose and allow clicking text to focus the control.

Intent

Prevent orphaned form controls by enforcing explicit label associations, improving navigation and user confidence.

Benefits

  • Screen-reader users get clear field names instead of generic announcements :contentReference[oaicite:7]{index=7}.
  • Keyboard and mouse users can click labels to focus inputs, enhancing usability :contentReference[oaicite:8]{index=8}.
  • Search engines index form field names, aiding SEO for interactive elements :contentReference[oaicite:9]{index=9}.
  • Mobile users benefit from larger click targets and reduced input errors :contentReference[oaicite:10]{index=10}.

Techniques

  • H44: Using <label> elements with for/id to associate text labels with form controls.
  • G173: Providing an accessible name via aria-label or aria-labelledby when visible labels aren’t possible.

HTML Semantics

The <label> element and ARIA naming provide the control’s accessible name, forming the root of the accessibility tree for form fields.

References

Tips & edge cases

  • Always use <label> where possible; it has broad support and binds click focus :contentReference[oaicite:11]{index=11}.
  • For icon-only controls, prefer aria-labelledby referencing visible text rather than aria-label :contentReference[oaicite:12]{index=12}.
  • Use automated accessibility checks (e.g., axe, pa11y) to flag missing labels early :contentReference[oaicite:13]{index=13}.

See also