Dernière mise à jour : 29 juin 2026
Une infobulle est une fenêtre d’aide contextuelle qui, au clic, présente un contenu complémentaire à l’information affichée sur la page.
- Guide d'utilisation
- Design
- Accessibilité
Utilisation
L’infobulle est utile lorsque l'on veut réduire la quantité de contenu sur une page, en rendant facultative la consultation de contenu complémentaire. Elle est appelée à l’aide de l’icône spécifiquement prévue à cet effet, placée à la droite du contenu pour lequel une information complémentaire ou une définition est requise.
Infobulle sur un surtitre
Infobulle sur l’étiquette d'un champ de saisie
Infobulle dans un corps de texte
Pour clairement identifier dans le paragraphe les mots auxquels l'infobulle est rattachée, ceux-ci seront soulignés d’un trait dont le style est réservé à cet usage.
Quand utiliser l’infobulle
Utiliser l’infobulle pour afficher une information complémentaire dont la consultation est facultative.
Aucune information essentielle, critique à la réalisation d’une tâche ou à la compréhension globale d’un contenu ne doit se trouver dans l’infobulle :
- Pas d’appel à l’action (à l’exception de l’icône « X » de fermeture).
- Pas d’options.
- Pas d’information hors contexte.
Quand envisager autre chose
Dans un formulaire, il est préférable d’afficher sous le champ de saisie le texte d’aide persistant, plutôt que dans une infobulle.
Rédaction UX
Le contenu de l’infobulle doit être bref et concis.
- Ne pas surcharger d’information l’infobulle ou y présenter un contenu trop long. Ainsi, le nombre de caractères permis, espaces incluses, est de 280 caractères maximum.
- Ne pas surutiliser l’infobulle : Il ne devrait pas y avoir plus de trois infobulles par page, sauf exceptions approuvées.
Anatomie
Couleur et styles
Deux couleurs permises pour l’infobulle, selon qu’elle apparaît sur un arrière‑plan blanc ou foncé :
Taille
La taille de l’infobulle varie en fonction du contenu qu’elle contient, dans le respect de la marge normée de 16px entre le contenu et le contour de l’infobulle.
Largeur minimale
Si le contenu de l’infobulle est très court (un ou deux mots), la largeur de l'infobulle s'adapte au contenu, tout en conservant la marge normée de 16px.
Largeur maximale
La largeur de l’infobulle s’adapte à celle de l’écran, jusqu’à un maximum de 320px dans la grille de petite taille.
Placement
- L’infobulle apparaît en haut ou en bas du contenu auquel elle réfère.
- Le chevron de l’infobulle qui pointe vers le contenu doit être positionné le plus près possible du texte auquel il réfère, mais sans jamais le cacher.
Interactivité
Ouvrir l’infobulle
La zone interactive, représentée ici par un i dans un cercle, doit être assez grande avec un placement aéré pour être activée avec le doigt, mais assez discrète pour s'insérer dans un texte.
À noter que l’icône et le lien, ainsi que tous leurs états, sont normés dans la trousse de design (UI kit).
Fermer l’infobulle
Utiliser le bouton à utilisation spécifique « Fermer ».
L'infobulle adopte le comportement de la fenêtre de dialogue pour assurer son accessibilité. Ce choix technique garantit une navigation identique sur ordinateur comme sur mobile.
À la navigation au clavier
La navigation au clavier doit permettre d’utiliser et de consulter une infobulle de manière prévisible, dans cet ordre :
- Touche Tab. : met le focus sur le bouton de l’infobulle. À l'affichage de l'infobulle, le focus se place sur le bouton « X » qui permet de la fermer.
- Touche Entrée ou barre d’espacement : active l'élément qui a le focus, qu'il s'agisse du bouton « X » de fermeture de l’infobulle ou des liens dans son contenu.
- Touche Échap. : ferme l'infobulle, peu importe où se trouve le focus.
Tant que l'infobulle est affichée, le focus parcourt uniquement son contenu et ignore ce qui est présenté en arrière-plan.
Avec les lecteurs d’écran
Pour assurer une navigation fluide dans l’infobulle, ces éléments doivent être annoncés :
- L'intitulé du bouton, sa fonction ainsi que l’action qu’il permet d’accomplir, soit l'ouverture d'une fenêtre de dialogue.
- S’il s’agit d'un bouton ou d’un lien représenté uniquement par une icône, il faut les implémenter selon les recommandations des pages Sémantique des liens et Sémantique des boutons.
- Son contenu selon un ordre de lecture logique, une fois le composant activé.
Exemple de ce qui doit être annoncé : « Information supplémentaire, bouton, ouvre un dialogue ».
Implémentation (HTML)
Pour être correctement annoncée par les lecteurs d’écran et permettre la navigation au clavier, l’infobulle doit lier son bouton d'ouverture à son contenu :
Bouton déclencheur
C’est un bouton <button> qui porte l'attribut aria-haspopup="dialog".
Son intitulé permet de comprendre ce qu’il déclenche.
Plus d’informations à ce sujet est disponible dans la page Sémantique des libellés.
Modale
C’est un conteneur qui porte les attributs role="dialog" et aria-modal="true". Ces attributs indiquent aux lecteurs d’écran d’ignorer temporairement ce qui se trouve à l’extérieur de la modale.
La modale porte un nom accessible qui lie son intitulé à son conteneur. Ce nom est implémenté par un couplage d'attributs aria-labelledby et id.
Son bouton de fermeture est implémenté dans un <button>, dont l'intitulé est défini par un attribut aria-label.
Il contient une icône <SVG> "X", ignorée par les lecteurs d'écran grâce à un attribut aria-hidden="true".
Chaque élément interactif contenu dans l'infobulle a un rôle et un nom accessible adaptés à sa fonction sémantique.
Plus d’informations à ce sujet est disponible dans la page Comprendre l’importance d’une bonne sémantique.
Comment se comporte une infobulle accessible ?