Checkbox
Success Criteria:
| Description | Label describes the input |
|---|---|
| Role | Identifies as a checkbox |
| Relationships | for="input-id" is required in the label |
| State | checked/unchecked/disabled |
| Focus | Visibly focusable with tab / swipe |
| Action | Check/uncheck with spacebar / double tap |
Keyboard & Screenreader Support
| Tab / swipe | Moves keyboard focus to the checkbox. |
|---|---|
| Space / double tap | Toggles checkbox between checked and unchecked states. |
Native Element
Native checkbox inputs have all keyboard and focus interactions built in for free.
Description
- Label inner text should describe the input.
- aria-describedby="description-id" for additional descriptions
Role
- Is natively a checkbox
Relationships
- for="input-id" connects the input to its label
- <fieldset> should wrap a group of related checkboxes
- <legend> should describe the group
State
- checked/unchecked
Focus
- Is natively focusable with the tab key
- Focus must be visible
Actions
- Tab / swipe
- Space / double tap
Custom Element
Avoid building custom checkbox inputs; there is probably no reason a native checkbox cannot be styled as desired.
Description
- Inner text should describe the radio element.
- aria-label="input description" can also be used.
Role Requires extra work
- role="checkbox" for the focusable checkbox element
Relationships Requires extra work
- aria-labelledby="label-id"
State Requires extra work
- aria-labelledby="label-id"
Focus Requires extra work
- tabindex="0" to make it focusable
Actions Requires extra work
- Tab / swipe
- Space / double tap