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 tab key or arrow key to move focus to a checkbox I SEE focus is visually indicated
Then when I use the spacebar or enter to activate the checkbox I SEE the state is changed

2 Android 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 checkbox
- I HEAR any visible label is read with the checkbox in a single swipe
- I HEAR it expresses its state (selected, unselected, disabled)
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
Tab or arrow keys	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 checkbox
Group	Any visible label is read with the checkbox in a single swipe
State	It expresses its state (selected, unselected, disabled)

4 Device settings

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

Usage

Checkboxes let users select one or more items from a list, or turn an item on or off.

Use checkboxes (instead of switches) for localized choices (like “Shipping address matches billing address”)
Use checkboxes (instead of switches or radio buttons) if multiple options can be selected from a list (like search filters)
Label should be easily scannable
Selected items are more prominent than unselected items

Material guidance

Material accessibility overview

Related checkbox entries