Usage
Radio buttons let people select one option from a set of options
- Use radio buttons (not switches) when only one item can be selected from a list
- Label should be scannable
- Selected items are more prominent than unselected items
Radio button
How to test a radio button
Given that I am on a screen with a radio button
1 Keyboard
-
WHEN I use the tab key or arrow key to move focus to a radio button I SEE focus is visually indicated
-
Then when I use the spacebar to activate the radio button I SEE the state is changed
2
Android
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a radio button
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a radio button
- I HEAR any visible label is read with the radio button in a single swipe
- I HEAR it expresses its state (selected, unselected, disabled)
-
Then when I doubletap with the radio button 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 | Focus visibly moves to the checked radio button in the group. if a radio button is not checked, focus moves to the first radio button in the group |
| Spacebar | If the radio button with focus is not selected, changes the state to selected |
| Arrow-keys | Moves focus to and selects the previous or next radio button in the group |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the element, expresses its name, role, state |
| Doubletap | If the radio button with focus is not selected, changes the state to selected. otherwise, does nothing. |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role | It identifies itself as a radio button |
| Group | Any visible label is read with the radio button 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 |