Usage
There is no native iOS radio button, so stop trying to make one.
Role & states
A radio button will be made from a modified button.
- Its role will be button
- It will have only one declared state of selected; unselected will not be read on focus
iOS Radio button
How to test a radio button
Given that I am on a screen with a radio button
1 Keyboard only
-
WHEN I use the arrow keys or ctrl + tab to move focus to a button I SEE focus is visually indicated (strongly if high contrast enabled)
-
Then when I use the spacebar to activate the button I SEE the state is changed
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a button
- I HEAR any visible label is read with the button in a single swipe
- I HEAR it expresses its state (selected, dimmed)
-
Then when I doubletap with the 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
-
When I use Increased contrast I SEE focus outline becomes high contrast
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Arrow keys or ctrl + tab | Focus visibly moves to the button |
| 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 (only if selected) |
| 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 button |
| Group | Any visible label is read with the button in a single swipe |
| State | It expresses its state (selected, dimmed) |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |
| Increased contrast | Focus outline becomes high contrast |