Accessibility in React Button Group

4 Sep 20263 minutes to read

The React Button Group component adheres to accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The following table outlines the accessibility compliance of the React Button Group component:

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes

Legend:

Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

Keyboard interaction

The React Button Group component follows the keyboard interaction guideline, making it accessible for people who use assistive technologies and those who rely entirely on keyboard navigation. The following keyboard shortcuts are supported:

Normal behavior

Press To do this
Tab Focuses the next button in the React Button Group.
Enter/Space Activates the focussed button in the React Button Group.

Checkbox behavior

Press To do this
Tab Focuses the next button in the React Button Group.
Space Activates the focused button in the React Button Group.

Radio button behavior

Press To do this
Tab Focuses the active button in the React Button Group.
Right/Left Activates the next or previous button in the React Button Group.

Ensuring accessibility

The React Button Group component’s accessibility is validated using accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the React Button Group component is shown in the following sample. Open the sample in a new window to evaluate the React Button Group component’s accessibility with accessibility tools.

See also