Radio button

Test for mobile

• When I use the tab key to move focus to a radio group, 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 radio button, I see the focus is visually indicated
• when I use the spacebar, the radio button activates on iOS and Android
• when I hit enter, the radio button 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 radio button:

• I hear that its label and purpose are clear
• I hear that it identifies itself as a radio option
• I hear that hints or errors are read after the label, and related inputs include a group name (e.g., "Shipping options")
• I hear that it expresses its state (selected, checked, disabled)
• then when I double-tap with the radio in focus, I hear that the state is changed

Test screenreader gestures

• When I swipe, the focus moves to the element and expresses its name, role, state, and whether it's disabled.
• When I double-tap, I verify that it toggles the radio button state

 

Test screenreader output

When I use a screenreader output,

• I hear a clear label and understand its purpose
• I identify its role as a radio button in Android and a button in iOS
• I confirm that the visible label can be grouped with the checkbox in a single swipe
• I verify it expresses its state, whether it's disabled/dimmed,
  (iOS: checked/unchecked, selected/unselected. )
  (Android: checked/not checked))

 

Test device iOS settings

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