Components

Checkbox

Checkboxes let people pick any number of options from a list, or turn one option on before they submit.

Keyboard

Key	What it does
`Tab`	Moves focus to the checkbox.
`Space`	Checks or unchecks it.

Screen readers

Use a native checkbox, or role="checkbox" with aria-checked if you must build one.
Tie the label to the input, so a screen reader reads it and a click on it toggles the box.
Wrap a group in a fieldset with a legend, so the question is read before the options.

Contrast

Checkbox edge: 4.76:1 light, 3.77:1 dark (needs 3:1).
Checkbox checked fill: 7.82:1 light, 9.59:1 dark (needs 3:1).
Checkbox check mark: 7.82:1 light, 10.49:1 dark (needs 3:1).
Focus ring on page: 7.47:1 light, 7.44:1 dark (needs 3:1).
Focus ring on default: 7.82:1 light, 6.80:1 dark (needs 3:1).

Target size

The box is 24px (checkbox.size, the minimum target), and the label extends the clickable area.

The test for every component: can someone finish the task with a keyboard alone, and with VoiceOver or NVDA alone?