Infobulles personnalisées

Sommaire

Principe

Les infobulles sont des messages qui permettent 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 sur un bouton.

Les infobulles sont dites « personnalisées » 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.

Socle HTML

<button aria-describedby="infobulle">
  <svg role="img" aria-label="Plus d'information">[...]</svg>
</button>
<div role="tooltip" id="infobulle">
  <div class="hidden">
    [Contenu de l'infobulle]
  </div>
</div>

Rôles, états et propriétés ARIA

  • role="tooltip" doit être appliqué sur le conteneur de l’infobulle.
  • Le conteneur de l’infobulle doit posséder un attribut id renseigné avec une valeur unique.
  • Le bouton 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.
  • Le bouton est ici réalisé avec une icône <svg> informative.

Interactions au clavier

Entrée et Espace

Lorsque le focus est positionné sur le bouton qui permet l’affichage de la tooltip, affiche ou masque l’infobulle.

Échap

Lorsque l’infobulle est affichée, masque l’infobulle.

Comportements attendus

  • L’infobulle doit s’afficher lorsque le bouton qui en permet l’affichage :
    • Est survolé par la souris.
    • Prend le focus clavier.
  • L’infobulle doit être masquée lorsque le bouton qui en permet l’affichage :
    • N’est plus survolé par la souris.
    • Perd le focus clavier.
  • Une pression de la touche Échap doit permettre de masquer l’infobulle.
  • L’infobulle doit rester affichée lorsqu’elle est survolée par la souris.
  • Lorsque l’infobulle est masquée, seul son contenu doit l’être (à l’aide de display: none; ou visibility: hidden; par exemple). Le conteneur de l’infobulle doit rester présent et visible dans le DOM HTML.

Remarques

  • L’avantage majeur d’une infobulle personnalisée par rapport à son homologue HTML standard (attribut title) réside dans le fait que la première est également accessible aux personnes naviguant au clavier.
  • Nous recommandons fortement l’utilisation exclusive d’un bouton pour l’affichage d’une tooltip, afin de permettre aux personnes naviguant au doigt sur un téléphone de pouvoir aussi les afficher.

9 commentaires

  • Par Simon, le 13 septembre 2021 à 9h00.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    Désolé pour les balises dans le commentaire.

    Il faut lire :

    Je suis plutôt étonné que le socle HTML utilise la balise a , un button ne serait-il pas plus adapté ?
    Il n’est pas question de navigation mais bien d’afficher du contenu.

    Répondre

    • Par Romain Desjardins (Atalan), le 16 juin 2022 à 14h12.

      Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Simon, navré pour cette réponse tardive.

      Ici l’objectif de l’infobulle est d’obtenir une information complémentaire qui apparaît au survol et à la prise de focus clavier sur un élément. Cet élément peut très bien être un lien, un bouton ou même un texte quelconque.

      Voici des exemples d’implémentation de l’infobulle personnalisée : https://zoebijl.github.io/apg-tooltip/

      Nous avons choisi dans notre exemple la balise <a> afin de montrer qu’il est plus avantageux d’afficher une information complémentaire par le biais d’une infobulle personnalisée plutôt que par l’intermédiaire de l’attribut HTML standard title, puisque cette infobulle sera également accessible aux personnes navigant au clavier.

      J’espère avoir pu vous éclairer sur ce point.

      Bonne journée à vous,
      Romain

      Répondre

  • Par Simon, le 13 septembre 2021 à 8h50.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    Je suis plutôt étonné que le socle HTML utilise la balise , un ne serait-il pas plus adapté ?
    Il n’est pas question de navigation mais bien d’afficher du contenu.

    Répondre

  • Par Thib, le 17 avril 2021 à 20h47.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,

    La plupart des méthodes de création d’infobulles accessibles nécessite l’ajout d’un élément html dédié.

    Je me pose la question de conserver l’accessibilité des données textuelles générées via un pseudo-élément comme ::after (en les récupérant depuis un attribut data-*), notamment dans le souci de conserver un code html minimaliste. A priori, le contenu généré par un pseudo-élément ne devrait plus être accessible à un outil d’assistance.

    L’utilisation d’un attribut aria-label peut-il être une alternative pertinente à un attribut data-* en ce cas ?

    Cordialement

    Répondre

  • Par levy, le 14 décembre 2015 à 13h49.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    À noter qu’il est préférable de générer le contenu de la tooltip à la demande lors de la prise de focus ou du hover plutôt que de l’avoir en permanence dans le code car en cas de lecture css désactivé ou avec css personnalisé cela peut rendre visible l’ensemble des tooltip utilisés sur la page et rendre la compréhension de celle ci difficile.

    Répondre

  • Par Delphine Malassinge, le 9 octobre 2015 à 9h15.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Dans la section « Interactions au clavier
    Échap », il manque un verbe dans la phrase « Lorsque l’infobulle est affichée, masque l’infobulle. »
    Du coup, elle n’est pas forcément très claire.

    Répondre

    • Par Sébastien Delorme, le 9 octobre 2015 à 16h33.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Delphine,

      En fait le verbe est « masque ». La formulation précise l’action réalisée suite à l’action Échap.
      Dans toutes les fiches on retrouve cette tournures dans les interactions clavier, par exemple dans la fiche Accordéons.

      Si ces tournures paraissent étranges, peut-être devons-nous les revoir ?
      Sinon, nous pouvons plus simplement proposer : « Masque l’infobulle (lorsque celle-ci est affichée) ».

      Répondre

      • Par Delphine Malassinge, le 12 octobre 2015 à 17h39.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        Oups, je voulais dire « il manque le sujet » !

        Maintenant, ça me paraît tout à fait logique de garder la même structure de phrase de fiche en fiche.

        Mais pourquoi ne pas reprendre ce dont on parle dans ces phrases-là ? « Lorsque l’infobulle est affichée, la touche « Echap » masque l’infobulle » ?
        (Si ce n’est que cela vous fait reprendre toutes vos fiches !)

      • Par Laurent Bracquart, le 13 octobre 2015 à 16h31.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        Bonjour Delphine,

        Pour le moment, le nom de la touche concernée n’est pas repris à ce niveau car nous avions jugé la redite redondante et non nécessaire à la compréhension de la fiche.

        La section « Interactions au clavier » de chaque fiche est inspirée des contenus que proposent parfois les éditeurs de logiciels lorsqu’ils annoncent les raccourcis clavier utilisables dans leurs applications. On y retrouve souvent une association entre une touche et une action portée par un verbe à l’infinitif (nous avons ici opté pour le présent).

        Voir par exemple ce qui est proposé ici :

        Qu’en penses-tu, suite à ce nouvel éclairage ?

        Nous envisageons la mise à jour de l’ensemble des fiches si nous recevons d’autres retours dans ce sens.

        Bonne journée à toi.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Mises à jour

28/08/2024
Mise à jour mineure.
27/10/2025
Mise à jour majeure de la fiche qui met maintenant en avant l’utilisation d’un bouton pour l’affichage de la tooltip, au lieu d’un lien précédemment.

Haut de page