What the component handles
- Arrow key navigation between options within the group
- Proper radio button semantics and grouping (role="radiogroup")
What you need to provide
- accessibleText prop to provide screen reader label for the group
- aria-controls linking to content that changes based on selection
Color contrast
Since the Segmented Control’s background is not necessary to determine the component’s hit area, there is no contrast requirement beyond the 4.5:1 text contrast, which is ensured.
Using a segmented control with icons only is not accessible because the contrast between the selected and non-selected states is insufficient. When text labels are used as intended, the text’s weight difference ensures compliance with WCAG 2.2 AA standards.