AccessTooltip : rendre le title accessible au clavier

AccessTooltip est une petite fonction JavaScript qui va vous permettre de rendre les infobulles (title) accessibles au clavier.

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

Pour en savoir plus sur les problématiques liées à l’utilisation de title vous pouvez lire cet article de blog : AccessTooltip : une infobulle (title) activable au clavier.

Comment ça fonctionne

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é.
A 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 via CSS et propose plusieurs comportements comme la temporisation ou la fermeture via la touche escape, il est également possible d’utiliser le motif de conception ARIA tooltip.

Tester le script

Vous pouvez tester le script sur ce site où trois cas génériques sont implémentés : title sur des liens, un champ de formulaire (recherche) et des images.
Il vous suffit de tabuler.

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 :