Radio button
How it works
The radio button Carbon component is a radio group containing a set of checkable buttons, known as radio buttons where no more than one of the buttons can be checked at a time. In this example the first button is set to be selected by default. The tabindex="0" has been added to allows each button to receive keyboard focus placing the element in the logical navigation flow.
Accessibility considerations
- When a radio group does not have a default selected the focus should move to the first radio button in the group.
- Labels should be presented after the radio button.
- If the radio button is a required field include the aria-required property and indicate that it is a required field.
Resources
- W3C WAI-ARIA Radio Group Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.
- IBM Accessibility Checklist Checkpoint:
- 2.4.3 Focus Order (WCAG Success Criteria 2.4.3)
- 2.4.7 Focus Visible (WCAG Success Criteria 2.4.7)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations
- No violations
macOS screen reader tests
Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Control-Option-Right arrow key to first radio button. VO announces the label, selected, radio button 1 of 3.
- Control-Option-Right arrow key to second radio button. VO announces the label, radio button 2 of 3.
- Space key selects and deselects the option.
- Control-Option-Right arrow key to disabled radio button. VO announces the label, dimmed radio button, 3 of 3.
- macOS Mojave version 10.14.6 with VoiceOver
- Safari version 13.0.2
- Carbon React version 7.7.1
- Safari version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Control-Option-Right arrow key to first radio button. VO announces the label, selected, radio button 1 of 3.
- Control-Option-Right arrow key to second radio button. VO announces the label, radio button 2 of 3.
- Space key selects and deselects the option.
- Control-Option-Right arrow key to disabled radio button. VO announces the label, dimmed radio button, 3 of 3.
Windows screen reader tests
Environment
Results
- Microsoft Windows 10
- JAWS 19.1810.64
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
- JAWS 19.1810.64
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
JAWS test:
- Use tab or shift tab to navigate in and out of the group box. When entering the group box, JAWS announces the title of the box, and the currently selected radio button together with it's status.
- Inside the group box, the user can use the arrow keys to navigate among the buttons, when JAWS changes the selection and announces the current button.
- The disabled radio button is not announced, only if the user exits forms mode and uses the down arrow key to navigate to it.
- Microsoft Windows 10
- NVDA version 2018.4.1
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
- NVDA version 2018.4.1
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
NVDA test:
- Use tab or shift tab to navigate in and out of the group box. When entering the group box, NVDA announces the title of the box, and the currently selected radio button together with it's status.
- Inside the group box, the user can use the arrow keys to navigate among the buttons, when NVDA changes the selection and announces the current button.
- The disabled radio button is not announced, only if the user exits forms mode and uses the down arrow key to navigate to it.
iOS screen reader tests
Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
- Navigate the radio buttons by swiping left or right, or by pressing the left and right arrow keys when quick navigation is turned on.
- When entering the group box, VoiceOver announces, "radio button heading form start".
- The individual buttons are announced as,"radio button label radio button checked 1 of 3"
- VO announces the disabled radio button as "radio button label dimmed radio button unchecked".
- When double tapping on a radio button, it becomes activated and VoiceOver announces, "checked".
- When double tapping on the inactive button, voiceover announces its status.
Android screen reader tests
Environment
Results
- Android version 9 with Talkback
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
- Chrome version 72.0.3626.96 (Official Build) (64-bit)
- Carbon React version 7.7.1
Talkback test:
- Navigate the radio buttons by swiping left or right, or by pressing alt + the left and right arrow keys
- The individual buttons are announced as, "checked radio button label radio button"
- Disabled radio buttons are not indicated.
- When double tapping on a radio button, it becomes activated and Talkback announces: "not checked checked" or "checked not checked"
- Note: The user has to swipe away and back to make sure the button is set to the correct status.
- When double tapping on the inactive button, TalkBack randomly announces checked or unchecked.