Infobulles

Les infobulles sont des messages qui permettent à l’utilisateur d’obtenir une information complémentaire sur un élément. Elles se présentent sous la forme d’un message qui apparaît au survol et à la prise de focus clavier d’un élément.

Les tooltips sont de petites boîtes d'informations contextuelles qui apparaissent lorsque l'utilisateur pointe ou survole un élément. Ils peuvent contenir des informations supplémentaires sur l'élément, une brève description ou des conseils pour l'utilisation de l'interface utilisateur.

• Assurez-vous que les tooltips sont pertinents et précis, en fournissant des informations supplémentaires sur l'élément ou en clarifiant son utilisation.

• Évitez d'utiliser des tooltips pour des informations critiques ou essentielles, car ils peuvent être facilement ignorés ou manqués.

• Utilisez un langage clair et simple dans les tooltips pour éviter toute confusion ou malentendu.

• Assurez-vous que les tooltips apparaissent rapidement et sont faciles à fermer ou à masquer.

• Évitez d'empiler les tooltips les uns sur les autres, car cela peut rendre l'interface utilisateur encombrée et confuse.

Références

• Material Design : https://material.io/components/tooltips

• Bootstrap : https://getbootstrap.com/docs/5.0/components/tooltips/

• Ant Design : https://ant.design/components/tooltip/

• Fluent UI : https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip

Alias : tooltips, inline dialog, popover

Les infobulles sont dites « simulées en ARIA » lorsqu’elles ne sont pas construites sur la base du code HTML standard prévu pour ces éléments par la spécification : l’attribut title.

RÔLES, ÉTATS ET PROPRIÉTÉS ARIA

• role="tooltip" doit être appliqué sur le conteneur de l’infobulle.

• L’élément qui permet l’affichage de l’infobulle doit être rattaché à l’infobulle via l’attribut aria-describedby :

• Le conteneur de l’infobulle doit posséder un attribut id renseigné avec une valeur unique.

• L’élément qui permet l’affichage de l’infobulle doit posséder un attribut aria-describedby renseigné avec la valeur de l’attribut id du conteneur de l’infobulle.

• L’attribut aria-hidden doit être appliqué sur le conteneur de l’infobulle. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’infobulle :

• aria-hidden="false" lorsque l’infobulle est affichée.

• aria-hidden="true" lorsque l’infobulle est masquée.

COMPORTEMENTS ATTENDUS

• L’infobulle doit s’afficher lorsque l’élément qui en permet l’affichage :

• Est survolé par la souris.

• Prend le focus clavier.

• L’infobulle doit être masquée lorsque l’élément qui en permet l’affichage :

• N’est plus survolé par la souris.

• Perd le focus clavier.

• Il est également possible de masquer l’infobulle avec la touche Échap.

• Lorsque l’infobulle est masquée, elle doit l’être à l’aide de aria-hidden="true"et display: none; ou visibility: hidden;. Ou encore supprimée du code source.

• L’état de l’infobulle (aria-hidden, display, etc.) doit être modifiée dynamiquement à chaque mise à jour de son statut.

💬 Remarques

L’avantage majeur d’une infobulle simulée en ARIA par rapport à son homologue HTML standard (attributtitle) réside dans le fait que la première est également accessible aux utilisateurs qui naviguent au clavier.

⚠️ Attention

Dans le cas où l'infobulle est utilisé avec une abréviation, il faut aussi :

• Puisque la première mention de l’abréviation est toujours accompagné du texte complet, prévoir que l'infobulle soit caché pour les lecteurs d'écran en tout temps. Seul l'abréviation sera lu.

• Ajouter l'attribut tabindex="0" pour permettre le focus sur l'élément <abbr />.

📝 Ressources