Nouveau E-learning

Fenêtre modale

Une modale, ou couche, est une fenêtre superposée à la diapositive qui présente un contenu ou une action complémentaire en bloquant temporairement l’interaction avec l’arrière-plan. Le focus doit y être déplacé à l’ouverture, maintenu à l’intérieur, puis rendu à l’élément déclencheur à la fermeture.

Sur cette page

La modale affiche un contenu complémentaire sans quitter la diapositive : définition, détail, consigne, aide, retour de réponse. Deux mécanismes dans Storyline : le calque de diapositive et la lightbox.

Limite structurelle majeure

  1. Storyline ne produit pas une véritable boîte de dialogue. Les comportements attendus d’une modale ne sont pas garantis nativement.
  2. L’ouverture d’un calque n’est pas annoncée aux lecteurs d’écran.
  3. Le contenu situé derrière la modale peut rester restitué : il n’y a pas de confinement du focus.
  4. À la fermeture, le focus ne revient pas systématiquement sur l’élément déclencheur.
  5. Ces points figurent au plan de maturité en accessibilité d’Articulate. Ils doivent être compensés par la conception et vérifiés à chaque livraison.

Conséquence de conception : ne jamais placer dans une modale une information indispensable à la réussite d’une activité sans la rendre disponible autrement.

Quand utiliser une fenêtre modale

  1. Complément ponctuel : définition détaillée, consigne, aide, sans quitter la diapositive.
  2. Retour de quiz : correction et explication après validation d'une réponse.
  3. Confirmation d'une action à conséquence : quitter le module, réinitialiser un quiz.

Quand ne pas utiliser une fenêtre modale

  1. Contenu pédagogique principal : il doit rester dans le flux de la diapositive.
  2. Empilement de modales successives, qui fait perdre le fil et le point de retour.
  3. Ouverture automatique non sollicitée, ou fermeture impossible au clavier.

Sur cette page

Implémentation

  • Lightbox : déclencheur d’affichage d’une diapositive en lightbox
  • Calque : panneau Diapositives → Calques, puis déclencheur d’affichage
  • Régler les propriétés du calque (masquage et non-interaction du calque de base)

Détail du composant

Titre obligatoire

Titre explicite en tête de la modale, reprenant l’intitulé du déclencheur qui l’a ouverte.
Placé en premier dans l’ordre de focus du calque.

Bouton Fermer

Intitulé texte, ou texte de remplacement explicite : « Fermer la définition de l’EAA ».
Une croix sans nom accessible est non conforme.
Au minimum deux moyens de fermeture : bouton Fermer et touche ÉCHAP. Le clic hors de la modale ne peut pas être le seul moyen.

Ouverture

Uniquement au clic ou à l’activation clavier, jamais au survol.
Jamais d’ouverture automatique non sollicitée.

Sur cette page

Interaction au clavier

Ordre de lecture attendu dans la modale :

  • Titre de la modale, en premier élément
  • Bouton Fermer
  • Contenu
  • Actions éventuelles
Accordion keyboard navigation function table
Touche Fonction
TAB et MAJ+TAB Pour parcourir le contenu de la modale
Espace/Entrée Pour activer une action Fermeture par un bouton explicite
Touche Échap Ajouter un déclencheur de fermeture sur la touche ÉCHAP : ce comportement n’est pas natif