Accessibility

For designers

• All states (default, hover, selected, disabled, focus) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.
• The interactive area (radio button + label) must be large enough to support touch accessibility.

For developers

To ensure the radio button meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Semantic HTML
   • Use a native <input type="radio"> element. Do not recreate radio buttons using <div> or <span>.
   • The radio button must be associated with a <label> using the for attribute or by wrapping the input inside the label.
   • Avoid adding click handlers to non-semantic elements to toggle the radio button.
   • Wrap the set in a <fieldset> and provide a label using <legend>. This ensures screen readers announce the category before the individual options.
2. Keyboard Navigation
   • The radio button group must be reachable using Tab navigation.
   • Users must be able to move between options using Arrow keys.
   • Do not override default keyboard behaviour unless providing a fully accessible alternative.
3. Focus Ring / Visible Focus
   • The radio button must display a visible focus style when focused via keyboard.
   • The focus indicator must be clearly distinguishable and not rely only on colour.
   • Never remove the browser default focus outline unless replacing it with an accessible equivalent.
   • Focus styles must remain visible even when the radio button is hovered or checked.
4. Screen Reader Support
   • The radio button label must clearly describe the option or action it represents.
   • Use aria-describedby when additional helper text or error messages are present.
   • The checked and unchecked states must be correctly announced by assistive technologies.
   • If the radio button is disabled, ensure the disabled state is conveyed programmatically.
5. Interaction Feedback
   • The selected state must be communicated via the native checked attribute.
   • Visual changes (filled circle, border) should reinforce state changes.
   • Avoid relying solely on colour to indicate selected or unselected status.
   • Error states must be clearly communicated visually and programmatically.
6. Responsive and Tap Targets
   • The interactive area must be at least 44 px in height to support touch accessibility.
   • Ensure sufficient spacing between radio buttons when presented in a list to avoid accidental activation.

Semantic markup

Use native <input type="radio"> elements with a shared name value for each group. Wrap each input in a <label> to keep the full row clickable.

Keyboard interaction

• Tab moves focus to the selected radio in a group.
• Arrow keys move selection between options in the same group.
• Space selects the currently focused option.
• Focus visibility is handled by the tng-focus-within utility.

Keys	Actions
Tab	Moves focus into and out of the radio button group
Arrow keys	Moves focus between radio button options
Space	Selects the focused radio button

Group labels and descriptions

Each radio group needs a visible label via <legend>. If helper or error text is present, connect it with aria-describedby.