Label accessibility

WCAG 2.1 AA requirements

Semantics

• Renders a native <label> element. When linked via htmlFor, screen readers announce the label text as the input's accessible name.
• The <label> also makes the text a click target that focuses the associated input.

Required indicator

• The red asterisk from required is wrapped in aria-hidden so screen readers do not announce "star" or "asterisk".
• The asterisk is a visual cue only. Always set aria-required on the input element itself for assistive tech.

Peer-disabled styling

• When the paired input is disabled, the label automatically reduces opacity and changes the cursor via the peer-disabled Tailwind modifier. This requires the input to have the peer class (built into Checkbox and Switch).

Contrast

• tone="default" uses text-foreground — full contrast.
• tone="muted" uses text-muted-foreground — verify it stays above 4.5:1 against the page background.
• tone="destructive" uses text-destructive — designed to meet contrast requirements.

Audit checklist

• <label> element with htmlFor matching the input id
• Required asterisk is aria-hidden
• aria-required is on the input, not the label
• Muted tone meets 4.5:1 contrast
• Clicking the label focuses the associated input