New E-learning

Buttons 

A button is an interactive element that, when clicked or activated, triggers an action: submitting an answer, moving to the next slide, displaying a layer, or launching media. It is the primary lever for interaction and navigation in an e-learning module. 

In Articulate Storyline, buttons are fundamental interactive elements of the learner’s journey. They control progression through the module, initiate instructional interactions, and trigger variables or conditions that drive the learning experience. Their design must ensure clear visual affordance, consistency with the module’s visual identity, and full accessibility for keyboard use and assistive technologies.

On this page

Typography

Same font as the module, body size identical to or slightly larger than the running text, never below 16 px. 
Centered label, on a single line, one to three words starting with an action verb: "Submit my answer", "Continue", "Restart". 
No full capitals, no italics; text never truncated: the layout adapts to the longest label, including after translation.

Interaction area

  1. Recommended target 44 × 44 px, minimum 24 × 24 px, including for icon buttons. 
  2. Minimum internal padding of 12 px horizontal and 8 px vertical. 
  3. Minimum spacing of 8 px between two buttons; 24 px between a destructive or irreversible button and its neighbors. 

Layout and consistency

  1. Position, order, and labels of progression buttons identical across all slides of a given path. 
  2. A single action vocabulary for the whole module: do not alternate between Submit / Confirm / OK. 
  3. Button color must be distinct from link colors and from answer-feedback colors (correct / incorrect), to avoid any confusion of role. 
  4. No button signaled by color or icon alone, no blinking animation to draw attention. 

When to use a button

  1. Trigger an action: submit an answer, display a layer, launch an animation, reset an interaction. 
  2. Drive progression: move to the next or previous slide in a controlled path. 
  3. Branching scenario: offer the learner explicit, distinct action options. 

When not to use a button

  1. Linking to an external resource (website, document): use a link, whose behavior is better signaled. 
  2. Selecting one answer among several: use radio buttons or checkboxes, which carry the notion of a selected state. 
  3. Decorative or non-clickable element: do not give a button-like appearance to an inert shape. 

On this page

Labeling and screen reader output 

  • Each button must carry an explicit label that conveys the action it triggers, not its shape (avoid "Click here"; favor "Submit my answer", "Continue"). 
  • Systematically fill in the "Accessibility" field in Storyline for buttons whose visual label is absent or insufficient (icon buttons, image buttons). 

Contrast

  1. Label / button background: minimum ratio 4.5:1 in all states. 
  2. Button background or border / slide background: minimum ratio 3:1, so the button's boundary is perceptible. 
  3. Focus indicator: minimum ratio 3:1 against adjacent colors, minimum thickness 2 px, never truncated by the button's outline or hidden by a neighboring object. 
  4. Icon next to the label: minimum ratio 3:1, and removed from the focus order if purely decorative. 
  5. Disabled state: must remain legible; reaching 4.5:1 is the goal; never go so low that the label becomes indecipherable.

Keyboard focus

The focus indicator must be visible and sufficiently contrasted to be perceptible to learners navigating by keyboard. 
The tab order must follow the slide's instructional logic and be configured manually in Storyline's accessibility panel. 
A button in a dimmed state must be excluded from the tab order. 

Behavior and interaction

A button must trigger its action only on explicit activation (Enter or Space), never on mere focus. 
In branching scenarios, each choice button must be reachable and activatable independently of the others, with no order constraint imposed on the learner. 
Buttons that trigger the opening of content (layer, window) must allow that content to be closed by keyboard without losing the initial focus point. 

On this page

Keyboard interaction

In an Articulate Storyline e-learning module, keyboard navigation on buttons relies on the following keys: 

Accordion keyboard navigation function table
Key Function
Tab/Shift+tab
  • reach the button in the slide's tab order
  • return to the previous button in the tab order
Enter/Space
  • activate the button and trigger the associated action /li>
  • alternative for activating the button

The tab order of buttons must be configured manually in the panel in Storyline. A button misplaced in this order can break the instructional logic of the path, particularly in branching scenarios where the order in which choices are activated carries didactic meaning. 
A disabled button (Disabled state in Storyline) must be excluded from the tab order so as not to create a navigation stop with no possible action for the learner.