New E-learning

Focus

Focus is the visual indicator that signals, at all times, which interactive element has been reached via keyboard. It allows learners navigating without a mouse to find their bearings on the slide: it must remain visible, sufficiently contrasted, and never truncated by another element. 
Focus is a visible outline that indicates the element currently selected by the learner. It lets people navigating by keyboard or using assistive technology know where they are on the slide.

On this page

When to use focus

  1. Any interactive element: button, link, input field, checkbox, radio button, media control. 
  2. Graphic customization: when Storyline's native indicator lacks contrast against the slide background. 
  3. Programmatic focus placement: opening a modal or a layer, displaying an error message. 

When not to use focus

  1. Removing or hiding the focus indicator for aesthetic reasons: to be excluded without exception. 
  2. Applying a focus style to a non-interactive element: it wrongly suggests a possible action. 
  3. Moving focus without any learner action while playback is in progress: the loss of orientation is immediate. 

One this page

Focus visibility

  • The focus indicator must be visible on all interactive elements. 
  • It must never be hidden by another object on the slide. 
  • Storyline's default focus indicator (yellow outline) must not be removed. .

Contrast

  • The contrast ratio between the focus indicator and the background must reach a minimum of 3:1. 
  • On a colored background, verify that focus remains unambiguously perceptible.

Tab order

  • Configure the tab order in the Focus Order panel in Storyline for each slide. 
  • Exclude non-interactive objects and dimmed/disabled buttons from the tab order. 
  • Verify that focus passes through every interactive element without skipping any. 

Behavior

  • Focus must not trigger an action: only the Enter or Space keys activate the element. 
  • After a layer or window opens, focus must move to the new content. 
  • After it closes, focus must return to the triggering element. 

On this page

Keyboard interaction

Focus moves according to the tab order defined in Storyline's Focus Order panel.

Accordion keyboard navigation function table
Key Function
Tab/Maj Tab move focus to the next element or the previous element
Space/Enter activate the element that has focus

The tab order must be configured manually in the Focus Order panel in Storyline. It must follow the instructional logic and the visual order of the slide (top → bottom, left → right). 
Focus must remain visible at every step of the learner's path and must never be lost after an interaction (click, opening a layer, playing a media element).