Switch

How to test a switch

Gherkin Condensed

Given that I am on a screen with a switch

WHEN I use tab to move focus to a switch I SEE focus is visually indicated
Then when I use spacebar or enter to activate the switch I SEE the state is changed

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

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

When I use	I see/hear
Tab	Focus visibly moves to the switch
Spacebar or enter	Switch toggles between states

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

Reads	I hear
Name	Its purpose is clear and matches visible label
Role	It identifies itself as a switch
Group	Any visible label is read with the switch in a single swipe
State	It expresses its state (on/off, disabled)

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

A toggle switch has two mutually exclusive states — on/off
Do not use a switch to toggle between other states/values
- Example: Using a switch to toggle between Weekly or Monthly subscriptions
  - Instead use radio buttons or a segmented control
Do not put names or values in the label that can confuse the state of the switch
- Example: Using a switch label like “Call blocking disabled” makes the on/off state difficult to discern
  - If “Call blocking disabled” is on, is call blocking disabled?
  - If “Call blocking disabled” is off, is it enabled?
  - Instead, label the toggle switch “Call blocking” which can be clearly on/off

Do not use for contextual/localized options for which a picker or button would be more appropriate
- Ex: “Shipping address matches payment address” is not a broad setting
Outside of a list, use a button that behaves like a toggle, not a switch.
Do not use for two mutually exclusive opposing named options
- Ex: “List view or Map view”

A toggle switch should be used for broad application/system settings
- Ex: “Dark mode” is a broad setting affecting an entire application; toggle switch is appropriate

How to test a switch