Nouveau Components

Infobulle

Une infobulle est un message bref et informatif qui apparaît lorsqu’un utilisateur survole ou met le focus sur un élément d’une interface graphique. Elle fournit des explications ou un contexte supplémentaire concernant cet élément, améliorant ainsi l’ergonomie et l’accompagnement de l’utilisateur.

Quand l’utiliser

  • Informations supplémentaires : utilisez des infobulles pour fournir du contexte additionnel ou expliquer la fonction d’un élément d’interface sans surcharger l’interface utilisateur.
  • Indications pratiques : utilisez des infobulles pour délivrer de courtes instructions ou clarifications aidant les utilisateurs à accomplir des tâches complexes.

Quand ne pas l’utiliser

  • Information essentielle : n’utilisez pas les infobulles pour transmettre des informations indispensables que l’utilisateur doit voir, car elles ne sont ni toujours visibles ni toujours accessibles.
  • Interfaces mobiles : évitez les infobulles sur les interfaces tactiles où l’action de « survol » n’existe pas.

Modes d'action

  • Interaction à la souris : les infobulles doivent apparaître lorsque l’utilisateur survole un élément avec le curseur, généralement après un léger délai.
  • Navigation au clavier : assurez-vous que les infobulles se déclenchent lors de la navigation au clavier, souvent lorsqu’un élément reçoit le focus.
  • Accessibilité pour les lecteurs d’écran : les infobulles doivent être accessibles aux lecteurs d’écran, idéalement via des attributs ARIA décrivant leur association avec les éléments de l’interface.

Contenu

  • Message concis : gardez le contenu des infobulles succinct pour transmettre rapidement l’information sans nécessiter une lecture prolongée.
  • Pertinence immédiate : assurez-vous que le contenu de l’infobulle est directement lié à l’élément auquel elle est associée, en fournissant une information pertinente.
  • Visibilité à la demande : les infobulles doivent n’apparaître qu’en cas d’interaction et ne doivent ni masquer d’autres éléments de l’interface, ni rester affichées de manière persistante.

Sur cette page

Fichiers et ressources Figma

Les designers peuvent importer l’ensemble des documents de conception depuis notre dépôt Figma grâce au lien fourni ci-dessous. Cela simplifie le processus de design et garantit un accès rapide aux dernières ressources graphiques pour un workflow plus efficace.

N’hésitez pas à utiliser l’aperçu du prototype présenté ci-dessous comme exemple pratique et démonstration du fonctionnement attendu du composant. Cette représentation interactive sert de guide visuel pour mieux comprendre les fonctionnalités et le comportement prévus.

Infobulle

Conception

Ressources

Infobulle — Taille large

Infobulle — Taille moyenne

Infobulle — Une ligne

Fermeture — Infobulle grande

Infobulle V2

Infobulle V3

Infobulle — Flèche bas-gauche

Infobulle — Flèche côté gauche

Infobulle — Flèche bas-droite

Infobulle — Flèche côté droit

Infobulle — Flèche haut-droite

Prototype

Sur cette page

Mots-clés

  • Composant d’infobulle (Tooltip Component) : élément d’interface utilisateur qui fournit une information textuelle supplémentaire lorsque l’utilisateur survole un autre élément ou lui donne le focus.
  • Attributs HTML d’assistance (Assistive HTML Attributes) : des attributs comme title ou certains attributs ARIA qui offrent des informations contextuelles afin d’améliorer la compréhension de l’interface et l’accessibilité.

Décomposition des composants

Infobulle par défaut

  • Libellé : l’infobulle est associée à un élément via title ou aria-describedby, fournissant un texte explicatif lors de l’interaction de l’utilisateur. L’attribut aria-describedby référence l’ID du contenu de l’infobulle, qui doit porter role="tooltip". Cela permet aux technologies d’assistance d’annoncer correctement le contenu lors de la navigation au clavier. Le contenu peut être masqué visuellement avec aria-hidden="true" jusqu’à ce qu’il soit nécessaire pour l’accessibilité (lorsque l’élément reçoit le focus).
  • Gestion de la visibilité : des actions utilisateur telles que le clic ou le focus sur l’élément associé déclenchent l’affichage de l’infobulle.
  • Comportement et interaction : les interactions de l’utilisateur déterminent l’affichage de l’infobulle, qui doit apparaître à proximité de l’élément décrit, sans masquer d’autres composants interactifs de l’interface.
  • Masquage de l’infobulle : l’utilisateur doit pouvoir masquer l’infobulle uniquement au clavier. Lorsque le focus est sur le bouton déclencheur ou que la souris le survole et que l’infobulle est affichée, l’utilisateur doit pouvoir la fermer avec la touche Échap.
  • Survol du contenu : l’infobulle doit rester visible lorsque l’utilisateur la survole avec la souris.

Actions

Déclenchement au survol

Déclenchement au clic

Lecteur d’écran

Le contenu de l’infobulle est rendu accessible aux lecteurs d’écran, souvent via l’attribut aria-describedby, afin de garantir que l’information soit transmise lorsque l’élément associé reçoit le focus.

Notes supplémentaires

L’infobulle ne doit pas être utilisée comme unique moyen de transmettre une information importante, car elle peut ne pas être accessible dans toutes les situations, comme sur les appareils tactiles ou pour certains utilisateurs en situation de handicap. Elle doit plutôt être utilisée en complément de l’interface, pour apporter du contexte supplémentaire, des explications ou pour guider l’utilisateur dans des interactions plus complexes.

Sur cette page

Keyboard navigation function table
Touche Fonction
Tab (Optionel) Il est également possible, de manière optionnelle, que la touche Tab permette de déplacer le focus vers l’infobulle.
Echap Ferme l’infobulle que le focus soit placé sur l’élément déclencheur ou non.

Infobulle (Cliquable)

Infobulle (Survol)

La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.