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 d’un élément.

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.

Cette fiche s’appuie sur le motif de conception « Tooltip » détaillé dans les ARIA Authoring Practices Guide (APG) du W3C.

Socle HTML

<a href="#" aria-describedby="infobulle">[Intitulé du lien]</a>
<div role="tooltip" id="infobulle">[Contenu de l'infobulle]</div>

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

  • tabindex="0" doit être appliqué sur l’élément qui permet l’affichage de l’infobulle, si ce dernier n’est pas atteignable au clavier par défaut.
  • 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.

Interactions au clavier

Échap

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

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.
  • 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, elle doit l’être à l’aide de display: none; et/ou visibility: hidden;. Ou encore supprimée du code source.

Remarque

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.

Composants

Ces composants « Infobulles personnalisées » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

9 commentaires

  • 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.

  • 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 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 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 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.

      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

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page