How can I help you?
Accessibility in React RadioButton component
2 Mar 20264 minutes to read
The RadioButton component adheres to accessibility standards, including ADA, Section 508, WCAG 2.2, and WCAG roles. These standards ensure the component is usable by all users, including those using assistive technologies.
The following table outlines the accessibility compliance for the RadioButton component.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
Legend:
- Fully supported
The RadioButton component follows WAI-ARIA patterns to ensure accessibility. The following ARIA attributes are implemented in the RadioButton component:
| Attributes | Purpose | Support |
|---|---|---|
role="radio" |
Defines the radio button semantic role for assistive technologies. | |
aria-checked |
Indicates the checked state of the RadioButton to screen readers. | |
aria-disabled |
Indicates the disabled state to assistive technologies. | |
aria-label |
Provides an accessible name for the RadioButton when no visible label is present. | |
Keyboard interaction
The RadioButton component implements keyboard interaction guidelines to support users relying on keyboard navigation or assistive technologies. The following keyboard shortcuts are supported:
| Press | To do this |
|---|---|
| Tab | Moves focus to the next RadioButton group or focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Up Arrow / Left Arrow | Selects the previous RadioButton option in the group. |
| Down Arrow / Right Arrow | Selects the next RadioButton option in the group. |
Ensuring accessibility
The RadioButton component’s accessibility levels are ensured through accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the RadioButton component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the RadioButton component with accessibility tools.