Keyboard interactions
Key
Interaction
Tab
Tabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time).
Shift + Tab
Moves focus to the previous item or group of items.
Space or Enter
Toggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected).
Cursor guidelines
Cursor
Description
Pointer
Use the pointer cursor for all interactive components in every state.
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
Non-text content
A
Non‑text elements—such as the checkbox control—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
A, AAA
Checkboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Color is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.
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
Checkboxes should be built in such a way that they can be resized without assistive technology up to 200%.
Visual presentation
AAA
Checkbox labels can wrap to multiple lines, so the 80-character (40 CJK) and no-justified-text guidance applies the same way it does for the group.
Non-text contrast
AA
The checkbox control and its 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 feactions
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.