New E-learning

Modal window

A modal, or layer, is a window overlaid on the slide that presents supplementary content or an action while temporarily blocking interaction with the background. Focus must move into it on opening, be kept inside it, and then be returned to the triggering element on closing. 

On this page

The modal displays supplementary content without leaving the slide: definition, detail, instruction, help, answer feedback. Two mechanisms in Storyline: the slide layer and the lightbox slide. 

Major structural limitation

  1. Storyline does not produce a true dialog box. The behaviors expected of a modal are not natively guaranteed. 
  2. Opening a layer is not announced to screen readers. 
  3. Content located behind the modal can remain accessible to assistive technology: there is no focus containment. 
  4. On closing, focus does not systematically return to the triggering element. 
  5. These points are listed in Articulate's accessibility maturity roadmap. They must be compensated for through design and checked at every delivery. 

Design consequence: never place information essential to completing an activity inside a modal without also making it available another way. 

When to use a modal window

  1. A one-off supplement: detailed definition, instruction, help, without leaving the slide. 
  2. Quiz feedback: correction and explanation after submitting an answer. 
  3. Confirming a consequential action: exiting the module, resetting a quiz. 

When not to use a modal window

  1. Main instructional content: it must remain in the flow of the slide. 
  2. Stacking successive modals, which causes the learner to lose their train of thought and their point of return. 
  3. Unsolicited automatic opening, or closing that is impossible by keyboard. 

On this page

Implementation

  • Layer: Slides panel → Slide Layers, then a Show trigger action 
  • Lightbox slide: a trigger action showing a slide as a lightbox slide 
  • Set the layer properties (hiding and disabling interaction with the base layer)

Component details

Mandatory title

Explicit title at the top of the modal, restating the label of the trigger that opened it. 
Placed first in the layer's focus order. 

Close button

Text label, or explicit Alt text: "Close the EAA definition." 
An X icon with no accessible name is non-compliant. 
At least two means of closing: the Close button and the ESC key. Clicking outside the modal cannot be the only means. 

Opening

Only on click or keyboard activation, never on hover. 
Never an unsolicited automatic opening. 

On this page

Keyboard interaction

Expected reading order within the modal: 

  • Modal title, as the first element 
  • Close button 
  • Content 
  • Any actions 
Accordion keyboard navigation function table
Key Function
TAB and SHIFT+TAB To move through the modal's content
ENTER or SPACE To activate an action. Closing via an explicit Close button
ESC key Add a closing trigger on the ESC key: this behavior is not native