Aller au contenu principal

Infobulles

Les infobulles sont utilisées pour donner un complément d’information.

Description

Une infobulle est utilisée lorsque le complément d’information qu’elle apporte est utile, contextuel, mais non essentiel.

Quelques recommandations

  • Une infobulle apparaît au survol ou au clic sur l’icône « point d’interrogation ». Elle disparaît au survol ou au clic à l’extérieur de la zone de l’icône ou de l’infobulle.
  • Au besoin, il est permis d’utiliser du gras ou de l’italique dans une infobulle.
  • Au besoin, il est permis de programmer un lien hypertexte sur un élément de l’infobulle.

Lorem ipsum dolor sit amet Ut enim ad minima Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.


Accessibilité

Programmation

  • La balise <span> contenant l’infobulle possède l’attribut role="tooltip".
  • Le bouton possède l’attribut aria-describedby qui est lié à l’attribut id de l’infobulle. Exemple : <button aria-describedby="tooltipid">Bouton d’infobulle</button><span role="tooltip" id="tooltipid">Texte de l’infobulle</span>.

Interactions

  • L’infobulle apparaît au focus du bouton et non au clic.
  • Lorsqu’il y a un élément pouvant recevoir le focus présent dans l’infobulle, il faut s’assurer :
    • Qu’à la prochaine tabulation, le focus est donné sur l’élément dans l’infobulle
    • Que l’infobulle reste visible
    • Qu’à la sortie de l’infobulle, l’infobulle se ferme
  • La touche « Échap » permet de fermer l’infobulle sans déplacer le focus clavier ou le curseur de souris.
  • Si l’infobulle a été ouverte avec la souris, il est possible de déplacer le curseur sur le contenu de l’infobulle sans que celle-ci ne se ferme.

Évaluer la page

L’information sur cette page vous a-t-elle été utile?
N’inscrivez pas de renseignements personnels. Notez que vous ne recevrez aucune réponse.