Passer au contenu principal

Infobulle

Infobulle dans Storybook

Utilisation​

Présentation​

Fournit un moyen discret de répondre à des questions sur l'interface utilisateur ou d'ajouter quelques informations ou instructions à une interface. Elles offrent une aide ponctuelle et contextuelle et peuvent communiquer la valeur des fonctionnalités. Les infobulles apparaissent lorsque les utilisateurs cliquent, survolent ou activent un élément.

Quand l'utiliser​

  • Utilisez des infobulles pour clarifier le but des actions ou des icônes en utilisant un texte bref et informatif.
  • Utilisez des infobulles pour afficher le texte complet des messages ou des chaînes de caractères qui ont été tronqués.
  • Utilisez des infobulles pour fournir une aide contextuelle et éviter les retours aux endroits qui posent problème.
Do
Prévoyez des infobulles pour les icônes sans étiquette.

Quand ne pas l'utiliser​

  • Les infobulles ne conviennent pas pour transmettre des informations ou des instructions qui sont essentielles à la réalisation d'une tâche.
  • Les infobulles doivent être utilisées de manière stratégique. Résistez à la tentation d'encombrer votre interface utilisateur avec des infobulles qui ne répondent pas à un besoin clair de l'utilisateur.
Do

Utilisez des infobulles pour fournir des informations supplémentaires, comme la raison pour laquelle un champ est répertorié.

Don't
Ne placez pas d'informations essentielles dans une infobulle.

Formatage​

Structure​

1. Info-bulle de base
2. Info-bulle d'icône
Définition de l'info-bulle

Les infobulles ont un arrière-plan foncé sur lequel se superpose un texte blanc qui affiche clairement l'information. Un caret indique la provenance de l'infobulle.

On distingue trois variantes d'infobulles qui répondent à différents besoins de conception :

  1. Infobulle de base : l'infobulle de base est utilisée pour donner des informations générales. Le texte est descriptif et lié au champ. L'infobulle de base peut également contenir des éléments interactifs tels que des boutons ou des liens.
  2. Infobulle d'icône : l'infobulle d'icône permet de clarifier le nom du bouton de l'icône interactive et de décrire sa fonction.
  3. Infobulle de définition : l'infobulle de définition définit une partie de texte prédéfinie.

Alignement et placement​

  • Positionnez les infobulles de façon à ce qu'elles ne bloquent pas le contenu connexe.
  • Lorsque plusieurs éléments sont à proximité, utilisez un caret pour indiquer la provenance de l'infobulle.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez autant que possible des verbes au présent et la voix active.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Rédaction d'infobulles​

  • Soyez concis. Les explications des infobulles doivent être aussi courtes et simples que possible.
    • Limitez le texte de l'infobulle à 2 lignes maximum (y compris les traductions).
    • Les infobulles qui décrivent la fonction d'un bouton ou d'un onglet d'action réservé à une icône doivent contenir seulement 1 ou 2 mots.
  • Le corps du texte doit comprendre des informations essentielles et utiles aux utilisateurs pour la tâche à accomplir.
  • Ajoutez un point à la fin des phrases complètes. Si l'infobulle est une phrase courte, n'utilisez pas de point.
  • Ne tronquez pas le texte dans une infobulle.
Do
Un texte trop long n'étant plus un « conseil », soyez bref.
Don't
N'utilisez pas de grands blocs de texte dans les infobulles.

Comportements​

Formatage d'une infobulle 1

Info-bulle avec un lien
  • Les infobulles s'affichent lors du survol et de l'activation. Elles restent affichées tant que l'utilisateur survole l'élément.
  • Bien que les infobulles puissent contenir des liens et des boutons, il est préférable de ne pas masquer de contenu interactif dans des infobulles.

Accessibilité​

Le composant Infobulle Jutro affiche des informations supplémentaires lors d'un clic, du survol ou de l'activation. Bien qu'il existe trois options pour déclencher une infobulle, nous vous conseillons d'utiliser un clic ou l'activation du point de vue de l'accessibilité. En effet, permettre l'affichage d'une infobulle au survol uniquement signifie que les informations qu'elle contient ne seront pas disponibles pour les utilisateurs utilisant uniquement un clavier et un lecteur d'écran.

  • Interaction avec le lecteur d'écran : le composant Infobulle a le rôle WAI-ARIA de « tooltip » et hérite automatiquement de l'attribut aria-live. En tant que tel, le contenu de l'infobulle est lu par les lecteurs d'écran.
  • Interaction avec le clavier : l'infobulle devient visible lorsqu'elle est configurée pour s'afficher au moment de l'activation. Elle devient également visible lorsque l'infobulle est configurée pour s'afficher lors d'un clic, car l'événement clavier est lié au clic par un programme.

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Veillez à passer en revue et à suivre les conseils expliqués ici ainsi que dans les bonnes pratiques de création conformément aux spécifications WAI-ARIA pour les infobulles.

  • Lorsque l'info-bulle est rejetée/fermée, assurez-vous que le focus est conservé sur l'élément qui l'a appelé.
  • Vérifiez les seuils de contraste des couleurs entre le texte et l'arrière-plan si vous appliquez des couleurs personnalisées à l'élément.
Note: Certaines configurations du composant Infobulle ne sont pas compatibles avec l'accessibilité.
  • Le déclencheur « Mouseenter » n'est disponible que pour les utilisateurs de souris. Le fait d'accéder au composant par tabulation, puis d'essayer de le déclencher n'affiche pas l'infobulle. Cela signifie que l'infobulle est inaccessible pour les utilisateurs qui utilisent un clavier.
  • Définir le paramètre « Masquer lors d'un clic » sur false ne répondrait pas à l'exigence WCAG 2.1 « Contenu lors du survol ou de l'activation », car il n'est pas possible de supprimer l'infobulle. L'infobulle peut masquer le contenu qu'un utilisateur doit lire.