Switch accessibility

WCAG 2.1 AA requirements

Semantics

• Renders a <button> with role="switch" and aria-checked driven by the checked prop.
• Screen readers announce the state as "on" or "off".
• type="button" prevents accidental form submission.

Keyboard interaction

Standard <button> behaviour — no custom key handling needed.

Label pairing

• Always pair with a Label linked via id / htmlFor. The label becomes a click target and provides the accessible name.
• If a visible label is not possible, set aria-label on the Switch directly.

Focus ring

• A 2px focus ring (ring-ring) appears on focus-visible with ring-offset-2.
• Never remove the focus ring without a replacement.

Disabled state

• disabled sets the native disabled attribute on the <button>, which implies aria-disabled.
• Visual treatment: 50% opacity and cursor-not-allowed.

Reduced motion

• The thumb slide transition uses duration-short (200ms). The user agent suppresses the animation when prefers-reduced-motion is active.

Audit checklist

• role="switch" and aria-checked present
• Tab-able and Space toggles
• Visible focus ring on keyboard navigation
• Paired with a Label via htmlFor
• Disabled state is both visual and semantic
• Thumb animation respects reduced motion