AccessTooltip

AccessTooltip est une fonction JavaScript qui rend les infobulles (title) accessibles au clavier.

Attention : ce projet n’est plus maintenu. Nous n’assurons plus sa mise à jour ni son support. C’est un prototype que vous pouvez personnaliser, modifier, améliorer et dont vous pouvez vous inspirer pour développer votre propre outil.

Préambule

Parmi les petites choses quotidiennement irritantes en accessibilité, la question de l’accès au clavier du title (infobulle, tooltip, comme vous voulez) occupe une place importante pour plusieurs raisons : sa très mauvaise utilisation, la position des WCAG (Règles pour l’accessibilité des contenus web) qui en déconseillent l’utilisation et le ridicule absolu des éditeurs de navigateurs qui n’ont toujours pas trouvé de solution.

Même si ce n’est pas une solution idéale, quelques lignes de JavaScript peuvent néanmoins améliorer la situation !

En savoir plus sur les problématiques d’accessibilité liées à l’utilisation de l’attribut HTML title : AccessTooltip : une infobulle activable au clavier avec l’attribut title.

Fonctionnement

Le script prend en charge tous les éléments en se basant sur une liste de sélecteurs CSS paramétrables : il n’est donc pas limité aux liens mais peut prendre en charge les champs de formulaire, les images, les abréviations…

Lorsque l’élément traité n’est pas naturellement tabulable, un tabindex="0" est ajouté.
À la prise de focus, un conteneur générique est mis à jour avec le contenu du title et repositionné dynamiquement à proximité de l’élément traité (le choix de la méthode est discuté dans l’article de blog).

L’infobulle est totalement paramétrable en CSS et propose plusieurs comportements comme la temporisation ou la fermeture avec la touche Echap, il est également possible d’utiliser le motif de conception ARIA tooltip.

Installation

Le script s’installe simplement en l’insérant comme dernier élément du contenu via :

<script type="text/javascript" src="AccessTooltip.js"></script>

Il faut également fournir une classe CSS pour styler l’infobulle elle-même, par exemple :

.access-tooltip{
 position:absolute;
 background-color:#FFFFF0;
 border:1px solid gray;
 border-radius:3px;
 padding:3px;
 box-shadow:2px 2px 2px #000;
 color:#000;
 font-size:80%;
}

Il faut ensuite insérer l’appel de fonction toujours en dernier élément de body et utiliser les paramètres pour en régler le fonctionnement.

<script type="text/javascript">
AccessTooltip({
 objs : 'a, button, input, textarea, select',
 tooltipClassName : 'access-tooltip',
 toolTipBetween : 5,
 toolTipUp : false,
 mouse : true,
 tempDelay : 4000,
 useAriaDP : false,
 useEscClose : true
});
</script>

Trois paramètres sont requis :

  • objs : la liste des éléments à traiter sous la forme de sélecteur CSS ;
  • tooltipClassName : la classe CSS utilisée pour l’infobulle ;
  • toolTipBetween : le décalage vertical, en pixel, entre l’infobulle et l’élément sélectionné. Utile, si vous utilisez des designs particuliers.

Vous pouvez utiliser également des paramètres optionnels :

  • tooltipUp : valeur false pour faire apparaître l’infobulle en dessous de l’élément sélectionné, true pour la faire apparaître au dessus ;
  • mouse : valeur true pour remplacer, à la souris, le title par l’infobulle ;
  • tempDelay : le temps d’affichage de l’infobulle en millisecondes (0 pour qu’elle reste visible jusqu’à la perte de focus) ;
  • useAriaDP : valeur true pour utiliser le design pattern ARIA tooltip ;
  • useEscClose : valeur true pour autoriser la fermeture de l’infobulle via la touche ESC (true par défaut avec le DP ARIA tooltip).

Vous pouvez télécharger le script sur le dépôt Github d’Access42 ou directement la release ici : AccessTooltip V 1.0.

Si tous les gars et les filles …

Bien entendu vous pouvez contribuer (le script est améliorable), proposer de nouvelles fonctionnalités ou signaler des bugs. Tout se fait à partir du dépôt Github du projet.

Afin de faciliter vos contributions et le travail de suivi et de maintenance nous vous proposons d’utiliser ces conventions :