Keyboard interactions
Key
Interaction
Tab
Moves focus to the next item or group of items.
Shift + Tab
Moves focus to the previous item or group of items.
Space or Enter
Toggles the switch between on and off.
Cursor guidelines
Cursor
Description
Pointer
Use the pointer cursor for interactive elements in all states.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Info and relationships, Identify purpose
A, AAA
Switches should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Switches never rely on color alone to convey meaning. The active state uses blue to reinforce “on,” and the handle shifts position to clearly show whether the switch is on or off.
Text contrast minimums
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Resize text
AA
Switches should be built in such a way that they can be resized without assistive technology up to 200%.
Non-text contrast
AA
The visual presentation of icons and various states have a contrast ratio of at least 3:1.
Text spacing
AA
Line height of text is at least 1.5x the font size when the label is wrapped.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Seizures and physical reactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.