AccessTooltip
AccessTooltip est une fonction JavaScript qui rend les infobulles (title) accessibles au clavier.
En savoir plus sur les problématiques liées à l’utilisation de title : AccessTooltip : une infobulle activable au clavier avec l’attribut title.
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 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 :
Il faut également fournir une classe CSS pour styler l’infobulle elle-même, par exemple :
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.
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
: valeurfalse
pour faire apparaître l’infobulle en dessous de l’élément sélectionné,true
pour la faire apparaître au dessus ;mouse
: valeurtrue
pour remplacer, à la souris, letitle
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
: valeurtrue
pour utiliser le design pattern ARIAtooltip
;useEscClose
: valeurtrue
pour autoriser la fermeture de l’infobulle via la touche ESC (true
par défaut avec le DP ARIAtooltip
).
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 :
- Une procédure standardisée, à base de fork : Comment contribuer à un projet Access42 via Github ;
- Une convention d’écriture pour JavaScript qui ne contient que quelques recommandations très simples : Convention d’écriture JavaScript.