New E-learning
Radio Buttons
A radio button allows the learner to choose a single option from several mutually exclusive choices. Radio buttons always work as a group: selecting one option automatically deselects the previous one.
Points of caution
- Minimum two options; below that, use a checkbox or a toggle button.
- Beyond seven options, prefer a choice list.
- Explicitly provide a "None of the above" or "I don't know" option rather than leaving the learner with no way out.
- A radio button must never be preselected by default in an assessment context: the initial selection biases the answer.
When to use radio buttons
- Single choice: only one answer possible among two to five options visible at the same time.
- True/False question or single-choice question in a quiz.
- Comparing options: when seeing all the choices at once makes the decision easier.
When not to use radio buttons
- Multiple answers possible: use checkboxes.
- A large number of options (beyond six or seven): prefer a drop-down choice list.
- A single isolated option: a lone radio button cannot be deselected; use a checkbox.
On this page
Label for each radio button
- Right-click the radio button; a window will appear.
- Click "Edit Text"
- Add a clear, descriptive label
- Every radio button must have a clear, unique label.
Exceptional case
If several radio-button questions must appear on the same slide :
- Create the radio buttons and their labels
- Select the buttons belonging to the same question
- Right-click → Create Button Set
- Clearly name each set
Without this step, all the buttons will be treated as a single group, which causes incorrect behavior (such as "one single set of 5 options").
Linking the question to the button group :
- The screen reader must announce which question the learner is answering. Otherwise, they only hear "option 1 of 4".
- The simplest approach: use a single-choice (or True/False) question slide. Storyline automatically links the question to the answers.
If the radio buttons are inserted manually :
- Repeat the question in the Alt text of each button (example: "Your level? - Beginner")
- Place the question immediately before the buttons in the reading order.
Announcing the error when no answer is selected : A message shown in red is not enough: a blind person cannot see it.
Question slide : the "Invalid response" message already exists. Check that its text is the first element in the layer's reading order, and that the learner cannot click through to what's behind the layer.
Manually created interaction : display an error layer with a trigger, write the message in plain text on it, and verify that focus lands on it correctly. Always test with a screen reader before validation.
Announcing the selected or unselected state :
The learner must be able to hear whether the option is checked, not just see it.
Storyline's native radio buttons do this automatically. A radio button drawn using shapes does not: in that case, use Storyline's native radio buttons rather than a hand-made visual.
On this page
Keyboard interaction
A single question per slide is recommended to ensure clear navigation.
The reading order must be logical:
- Question (text)
- Options (radio buttons)
| Key | Function |
|---|---|
| Tab | Access the radio button group. |
| Arrow keys (↑ ↓) | Navigate between options |