General
- Ensure sufficient colour contrast for all elements
- Do not rely on colour alone to indicate the elected state — use clear visual indicators
- Labels must be clear, concise, and positioned adjacent to radio buttons
- Provide helper text when additional context is needed
- Group related radio buttons together
Web
Semantic markup
- Use the <input type="radio"> element for radio buttons
- Group related radio buttons in a <fieldset> with a <legend> that describes the group
- Associate each radio button with its label using the <label> element and for attribute
- All radio buttons in a group must share the same name attribute
Accessible labelling
All radio buttons must be appropriately labelled and associated:
- Fieldset and legend: Use <fieldset> to group radio buttons and <legend> to describe the group
- Label: Use <label for="radio-id"> to associate the label with each radio button
- Helper text: Use aria-describedby="helper-id" on the fieldset to associate helper text with the entire group
- Error messages: Use aria-describedby="error-id" on the fieldset to associate error messages with the group
Validation and errors
When an error occurs, replace the value of aria-describedby from the fieldset to match the ID of the error element. This will help screen readers understand what is happening on the form when an error occurs.
- Use role="alert" on error messages to announce them to screen readers
- Update aria-describedby on the fieldset to reference the error message ID
- Provide clear, actionable error messages that explain how to fix the issue
Keyboard navigation
Radio buttons should:
- Receive focus using the Tab (⇥) key
- Be navigated using the Up (↑) and Down (↓) arrow keys (or Left/Right for horizontal layouts)
- Be selected using the Up (↑) and Down (↓) arrow keys — pressing the arrow keys both moves focus and selects the option
- Have clearly visible focus indicators
Best practice note (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): Radio button keyboard navigation differs from checkboxes. Arrow keys move focus AND select the radio button in one action, while Tab moves between radio button groups. Only one radio button in a group should be in the tab order at a time (the selected one, or the first one if none are selected).
Required fields
- Use the required attribute for required radio button groups
- Use aria-required="true" on the fieldset for enhanced screen reader support
React Native
- Use appropriate radio button components that support accessibility properties
- Provide accessibilityLabel for each radio button option
- Use accessibilityRole="radio" to identify each element
- Use accessibilityState={{ checked: true/false }} to indicate the selected state
- Group related radio buttons with appropriate labelling
- Ensure touch targets meet the minimum 44px × 44px requirement
- Use accessibilityRole="radiogroup" for the container if supported