'/%3E%3C/svg%3E){kind=small}
Nouveau E-learning
Infobulle
Une infobulle est un court texte d’aide affiché à la demande, au survol ou à la prise de focus d’un élément, afin d’apporter une précision complémentaire sans surcharger la diapositive. Elle ne doit jamais contenir une information indispensable à la compréhension du contenu.
Sur cette page
Quand utiliser une infobulle
- Expliciter la fonction d’une icône ou d’un bouton dont le libellé est nécessairement court.
- Donner une définition de glossaire, une unité, un rappel de format de saisie.
- Apporter une indication pratique brève sur une tâche complexe.
Quand ne pas utiliser une infobulle
- Jamais pour une information indispensable à la compréhension ou à la réussite d’une activité : une infobulle n’est ni toujours visible, ni toujours atteignable. Cette information doit rester en texte permanent sur la diapositive.
- Jamais comme unique support d’une consigne de quiz ou d’un message d’erreur.
- Jamais pour un contenu long : au-delà de deux phrases, utiliser le composant Modale ou un bloc de texte dépliable.
- Sur support tactile, le survol n’existe pas : prévoir un déclenchement au tap ou renoncer à l’infobulle.
Point de vigilance : le texte natif du champ « Texte de remplacement » de Storyline n’est pas une infobulle. Il n’apparaît pas visuellement et ne remplace pas un complément d’information destiné à tous les apprenants.
Sur cette page
Implémentation
- Créer un calque dédié contenant le texte de l’infobulle (Calques de diapositive → Nouveau calque).
- Sur l’objet déclencheur : déclencheurs « Afficher le calque » lorsque la souris survole et lorsque l’objet reçoit le focus ou est activé ; « Masquer le calque » lorsque la souris quitte, à la perte de focus et sur ÉCHAP.
- Décocher « Empêcher l’utilisateur de cliquer sur la diapositive de base » : l’infobulle ne doit pas se comporter comme une modale.
- Clic droit → « Accessibilité… » sur le texte de l’infobulle : le rendre visible pour les outils d’accessibilité et le placer dans l’ordre de focus juste après son déclencheur.
Association déclencheur / contenu
- Storyline ne permet pas de lier nativement un calque à son déclencheur comme le ferait un attribut ARIA. La solution robuste consiste à intégrer l’information dans le texte de remplacement du déclencheur, en plus du calque visuel : « Taux d’effort – information : part du revenu consacrée au logement ».
- Le contenu de l’infobulle doit ainsi être accessible par deux chemins : visuellement par le calque, et à la restitution par le texte de remplacement du déclencheur.
- Ne jamais dupliquer une information déjà présente en texte visible : la répétition allonge inutilement la restitution.
Contenu
- Message concis, une à deux phrases, directement lié à l’élément déclencheur.
- Aucun élément interactif à l’intérieur de l’infobulle.
- Aucune information essentielle, aucune consigne, aucun message d’erreur.
- Rédiger sans référence visuelle : ni « l’icône ci-dessus », ni « le bouton à droite ».
Déclencheur
- Le déclencheur doit être identifiable comme porteur d’information : icône d’aide normalisée ou terme souligné en pointillés, associée à un texte de remplacement explicite.
- Proscrire l’icône « i » sans texte de remplacement : elle est restituée par le nom de l’objet dans la timeline, ce qui n’est pas conforme.
- Un même pictogramme doit toujours désigner le même comportement dans tout le module.
Sur cette page
Interaction au clavier
Toute infobulle affichée au survol doit également s’afficher à la prise de focus clavier. Un déclenchement au seul survol exclut de fait les apprenants au clavier.
Le déclencheur doit être un objet focalisable (bouton, forme interactive), pas un simple texte non atteignable. Prévoir un léger délai à l’affichage au survol pour éviter les apparitions parasites au passage du curseur.
| Touche | Fonction |
|---|---|
| Tab | Atteindre le déclencheur, ce qui affiche l’infobulle |
| Espace/Entrée | Afficher l’infobulle si le modèle retenu est à l’activation |
| Touche Échap | Fermer l’infobulle sans quitter le déclencheur |