Accessibility
Keyboard
|
Key |
Interaction |
|
Space or Enter |
Executes the button action |
|
Tab |
Alternate between the multiple options |
Design Checklist
|
✅ |
Accessible use of color Color is not used as the only visual means of conveying information and meets a minimum of Level AA WCAG standards. |
|
✅ |
Accessible contrast for text Text has a contrast ratio of at least 4.5:1 for small text and 3:1 for large text. |
|
✅ |
Accessible contrast for UI components Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1. |
|
✅ |
Keyboard interactions It follows WCAG standards for keyboard accessibility guidelines and includes a description of keyboard interactions. |
|
✅ |
Appropriate HTML role A segmented control is treated like a list where each list item contains a button. |
|
✅ |
Appropriate ARIA attributes The current active button on the segmented control needs to have the aria-selected attribute. |
Focus Order
