Infobulles simulées en ARIA

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

Principe

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

Cette fiche s’appuie sur le motif de conception « Tooltip Widget » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.

Socle HTML


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

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

Interactions au clavier

Échap

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

Comportements attendus

Remarque

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

Composants

Les composants ci-après 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, variables en fonction de la version utilisée.

  1. jQuery accessible simple tooltip window, using ARIA.
  2. Tooltip.
  3. Tooltip: ARIA CSS selectors.
  4. Tooltip (jQuery UI).
  5. Accessible input tooltips with no JavaScript.
  6. ARIA Tooltip Example.

6 commentaires

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

    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.

      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.

        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.

        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.

    À 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 Laurent Bracquart, le 10 juillet 2017 à 11h23.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page