Switch

Test for mobile

• When I use the tab key to move focus to a switch, I see that focus is strongly visually indicated on the first unselected option or the selected option.
• Then when I use the spacebar to activate the radio button, I see the radio button with focus change state to selected.
• Then when I use the arrow keys to focus on the radio button, I see that the state is changed.

Test keyboard actions

• when I use the tab or arrows key to move focus to a switch, I see the focus is visually indicated
• when I use the spacebar, the switch activates on iOS and Android
• when I hit enter, the switch activates on Android

Test a mobile screenreader

When I use a mobile screen reader such as Talkback or VoiceOver, and I swipe to focus on a switch:

• I hear that its label and purpose are clear
• I hear that it identifies itself as a switch
• I hear that hints or errors are read after the label, and related inputs include a group name
• I hear that it expresses its state (selected, checked, disabled)
• When I double-tap while the switch is in focus, I hear that its state is changed

Test screenreader gestures

• When I swipe, the focus moves to the element and expresses its name, role, state
• When I double-tap, the element toggles between states.

 

Test screenreader output

When I use a screenreader output,

• I hear a clear label and understand its purpose
• I identify its role as a switch in Android and a button in iOS
• I confirm that the visible label can be grouped in a single swipe
• I verify it expresses its state, whether it's disabled/dimmed, on/off

 

Test device iOS settings

• When I resize, I scale the text label up to 200% without losing information