Skip to main content Skip to site Map

Checkbox

How to test a checkbox

Gherkin Condensed

Given that I am on a screen with a checkbox

1 Keyboard

WHEN I use the arrow keys or ctrl + tab to move focus to a checkbox I SEE focus is visually indicated (strongly if high contrast enabled)
Then when I use the spacebar to activate the checkbox I SEE the state is changed

2 VoiceOver screenreader

WHEN I use a screenreader AND I swipe to focus on a checkbox input
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a switch button or button
- I HEAR any visible label is read with the checkbox in a single swipe
- I HEAR it expresses its state (dimmed, checked, unchecked)
Then when I doubletap with the checkbox in focus I HEAR the state is changed

3 Device settings

When I use Text resize I SEE text can resize up to 200% without losing information

1 Keyboard actions

When I use	I see/hear
Arrow keys or ctrl + tab	Focus visibly moves to the checkbox
Spacebar	Element toggles between states

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element, expresses its name, role, state
Doubletap	Element toggles between states

3 Screenreader output

Reads	I hear
Name	Its purpose is clear and matches visible label
Role	It identifies itself as a switch button or button
Group	Any visible label is read with the checkbox in a single swipe
State	It expresses its state (dimmed, checked, unchecked)

4 Device settings

When I use	I see
Text resize	Text can resize up to 200% without losing information

Usage

Role & states

A checkbox will be made from a modified toggle switch or a button

If made from a toggle switch
- It will have two mutually exclusive states — checked/unchecked
If made from a button
- It will have only one declared state of checked; unchecked will not be read on focus

Apple HIG

Related checkbox entries