Radio button

Updated 2026-05-19

Overview Content Accessibility Code

Accessibility

• Forms & Data Entry
  - Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help
  every control needs a programmatically-associated label + accessible error message
• Required States
  Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key
• Feedback & Errors
  - Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live="polite" for non-critical status updates - Use aria-live="assertive" only for critical,
• Keyboard & Focus
  - All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be
• Color & Contrast
  Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t
• ARIA Guidance
  - Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a

Cross-cutting accessibility

See the full WCAG 2.2 AA guidance for criteria that apply to every component.