AccessTooltip : une infobulle (title) activable au clavier

27 février 2015, par Jean-Pierre Villain

Ce qui est très agréable quand on débute une nouvelle aventure, c’est qu’on peut ressortir des cartons tous les trucs, les machins et les bidules qu’on avait laissés de côté faute de temps.

Lors de la préparation du site d’Access42, je vois passer sur la liste collaborative une demande de pouvoir afficher les titres de liens au clavier, occasion rêvée de ressortir une petite fonction, toute bête, pour résoudre ce petit problème...

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

Introduction : title or not title that is the question

Il existait, au tout début du Web, un attribut magique pour l’accessibilité : le title. Je dis magique, car il permettait, d’une façon simple et triviale, de nous donner moyen d’accomplir sereinement une partie essentielle de notre mission : apporter des informations sur l’élément en cours de consultation.

Sur le papier, title a tout pour séduire. Il est utilisable sur tous les éléments, facile à implémenter et génère une infobulle, que demander de mieux ?

Malheureusement, dans ces immenses qualités, se cachent les germes de la catastrophe qui mènera l’assemblée des sages (les éditeurs des WCAG) à recommander de ne pas l’utiliser pour les liens au moins.

Les raisons sont multiples : la première c’est que personne ne sait trop comment le gérer, ce qui eut pour résultat qu’il se répandit comme un cancer foudroyant et que nos pages se retrouvèrent rapidement gangrenées de métastases pernicieuses :title vide, title inutile, title débile, title pour l’Antéchrist le SEO.

RIP title

Les autres raisons sont excellemment résumées par cette citation définitive d’un papier de Steve Faulkner, que je vous encourage à lire (en anglais : Using the HTML title attribute – updated ) :

If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.

Ce qu’on peut traduire en français par :

Si vous voulez cacher du contenu aux utilisateurs de téléphones mobiles ou de tablettes, aux utilisateurs de technologies d’assistance et aux utilisateurs de la navigation au clavier, utilisez le title.

Ce qui refroidirait plus d’un intégrateur soucieux d’accessibilité.

Néanmoins, la situation est, comme d’habitude, plus complexe, car title peut rendre de nombreux services, jusqu’à être quelquefois la seule solution envisageable.

Pour compléter l’excellent billet précédemment cité, je dirai que si title pose effectivement beaucoup de problèmes et qu’il faut l’utiliser avec parcimonie et en toute connaissance de cause, il reste indispensable et très souvent irremplaçable.

Mais au fait, pourquoi faire apparaître le title au clavier ?

Je ne prendrai que deux exemples, parmi beaucoup d’autres, où l’absence de l’infobulle au clavier crée un problème d’accessibilité réel sur un contenu, a priori, « conforme ».

Le premier exemple concerne les icônes cliquables qui peuvent être particulièrement obscures et incompréhensibles. Dans ce cas, l’utilisation de title est une solution facile et intelligente pour générer une infobulle explicative.

Trois icônes suivent un texte, le second icône représente un rectangle ouvert duquel s'échappe une flèche. Il est suivi du nombre 100+ et il est associé à un tooltip Partager

Dans l’exemple ci-dessus, sur le site figaro.fr, il est difficile de comprendre, sans l’infobulle, que la seconde icône est une fonction de partage par exemple.

Le second exemple est l’association de plusieurs champs de formulaire quand le design ne permet pas d’associer un label visible à chacun des champs. Là aussi, pour la même raison, l’affichage d’une infobulle, title est la solution idéale, l’utilisation d’un label caché ne résolvant le problème que pour les utilisateurs de lecteurs d’écran.

Dans le formulaire de recherche d'imprimé, deux champs sont associés, séparés par un tiret horizontal et précédés de l'expression numéro d'imprimé

Dans l’exemple ci-dessus, sur le site impots.gouv.fr, en l’absence de l’infobulle, il est bien difficile de comprendre que le premier champ de recherche d’imprimé doit contenir la première partie du numéro d’imprimé recherché, le second champ associé devant vraisemblablement contenir la seconde partie.

Dans ces deux cas, les utilisateurs de la navigation au clavier seront en grande difficulté ou dans l’impossibilité de réaliser l’action, faute de disposer de l’infobulle lors de la prise de focus.

Il existe naturellement des solutions de contournement en utilisant des portions de textes cachés (ou un label caché dans le second exemple) traités en infobulle via JavaScript, par exemple.

Néanmoins, ces solutions sont souvent complexes à mettre en place : elles sont artisanales et difficilement portables d’un site à l’autre. Elles souffrent, en outre, du fait que l’infobulle, n’étant plus traitée comme un élément d’interface, peut adopter un comportement inapproprié.

Si title était correctement supporté par les navigateurs, y compris en situation mobile, ce genre de problèmes serait réglé en deux coups de cuillère à pot, directement via l’interface de conception, sans avoir à retravailler le code et la présentation.

Magique, je vous dis...

Rendre le title accessible au clavier

Malheureusement, du fait de l’incurie des difficultés technologiques exceptionnelles que 15 ans de recherche des éditeurs de navigateurs n’ont pu résoudre, pas d’infobulle au clavier.

Il existe néanmoins une exception notable : Internet Explorer 11 (IE11), sur la plateforme Windows 8, génère enfin une infobulle au clavier. Après quelques tests, il s’avère que cela n’est pas une propriété propre à IE11, mais semble lié au système d’exploitation lui-même, car cela ne fonctionne que sur Windows 8.

Cela démontre au moins que c’est possible et repousse encore les limites du ridicule pour les autres éditeurs.

Pour enfoncer encore un peu plus le coin dans la mauvaise volonté des éditeurs, il faut remarquer qu’il existe un cas où le title est correctement traité et restitué pour la navigation au clavier, c’est sur le type de champ HTML5 pattern, parfaite illustration de ce qu’il faudrait faire.

Face à ce problème d’accès au clavier de title, n’importe quel JavaScripteur vous dira : pas de souci, ça se règle en trois lignes de code.

L’expérience montrant qu’en matière d’accessibilité, « pas de souci » est souvent la porte ouverte à des complexités insoupçonnées, voyons plus en détail les méthodes à notre disposition.

Deux méthodes sont généralement proposées pour rendre le title accessible au clavier.

Utilisation d’un élément enfant

La première consiste à insérer dynamiquement un élément enfant, basé sur le contenu du title, à la prise de focus pour faire apparaître l’infobulle. Généralement le title est supprimé et recréé sur les événements focus et blur. À noter que cette méthode est limitée aux éléments pouvant posséder un enfant à moins de la sophistiquer et de l’adapter, en fonction du type d’élément.

Bien que séduisante, cette méthode va poser un problème de restitution sur certains lecteurs d’écran. Par exemple, en fonction de la méthode d’accès (tabulation ou curseur virtuel) et de la nature de l’élément, le contenu de l’infobulle sera répété deux fois ou répété sur la prise de focus de l’élément suivant, ce qui est naturellement très problématique.

Cela tient, en partie, au fonctionnement même du mode navigation [1] au curseur virtuel des lecteurs d’écrans (la bête noire des spécialistes de l’accessibilité) et se révèle rétif à tout contournement via la couche auteur.

Cette méthode est donc à réserver à des cas particuliers lorsqu’il est vérifié qu’elle ne pose aucun problème de restitution.

Utiliser un conteneur générique

La seconde méthode utilise un conteneur générique, par exemple un div ou un paragraphe, repositionné dynamiquement à proximité de l’élément traité et dont le contenu est mis à jour en se basant sur le contenu du title.

Cette seconde méthode est plus satisfaisante à bien des égards : elle ne dépend plus de la nature de l’élément et permet de générer l’infobulle sur tous les éléments possédant un title de manière simple et efficace. Par ailleurs, elle conserve le title intact, ce qui le laisse disponible aux méthodes de restitution propres aux lecteurs d’écran. Son seul défaut est de ne pas pouvoir prendre en charge l’absence de restitution de title via certains lecteurs d’écran, en mode navigation, sur certains types d’élément comme les liens par exemple. Mais il s’agit plus d’un bug que devraient traiter les lecteurs d’écran, même si cela fait souvent débat.

C’est cette voie qui a été choisie pour AccessTooltip, afin de pouvoir généraliser la méthode à tous les types d’élément et ne pas perturber le fonctionnement délicat des lecteurs d’écran.

Trois lignes de code qu’il disait...

Techniquement, le développement ne pose pas de problème particulier même si le repositionnement de l’infobulle peut s’avérer délicat. En revanche se pose un problème inédit : quel comportement doit adopter l’infobulle ?

Le principe même de l’infobulle est de se superposer au contenu et, par voie de conséquence, de masquer les contenus adjacents. Ce qui peut être problématique si ces mêmes contenus sont nécessaires à la compréhension de l’élément actif.

À la souris, le problème est moins important, l’infobulle n’est visible que lors du survol et il est simple, pour la plupart des utilisateurs, de la masquer et de l’afficher à volonté.

Au clavier, c’est une autre paire de manche car cela nécessite de sortir et de réactiver l’élément, ce qui peut être compliqué, déroutant, voire problématique sur une saisie de champ de formulaire par exemple.

ARIA nous apporte une solution : le modèle de conception du role tooltip prévoit, en effet, que l’infobulle puisse être masquée avec la touche escape.

Mais comme cela nécessite que l’utilisateur soit au courant, il peut également être intéressant d’offrir une fonctionnalité de temporisation afin de s’assurer qu’après un temps judicieusement choisi, l’infobulle soit masquée pour redonner accès à l’ensemble des contenus adjacents.

La méthode de temporisation est, par exemple, celle choisie par Windows 8.

Enfin, quitte à s’appuyer sur le role ARIA tooltip, il peut également être intéressant de pouvoir utiliser ce motif de conception, très utile dans les formulaires par exemple.

Et comme nous savons tous, depuis bien longtemps, qu’en matière d’accessibilité le pire est d’imposer des solutions uniques ou arbitraires, il serait souhaitable que tous ces dispositifs annexes soient optionnels et personnalisables.

Ce qui commence à faire un joli petit cahier des charges...

AccessTooltip

Présenté sous la forme d’une simple fonction, AccessTooltip est le résultat de ces cogitations.

Cela nous a semblé suffisamment satisfaisant pour pouvoir le publier : le script fait bien ce qu’il doit faire : rendre le title accessible au clavier, sans perturber la restitution via les lecteurs d’écran et il possède toutes les options, en termes de comportement, décrites ci-dessus.

Avertissement : ne soyez pas dupes de vos rustines

Ne perdez néanmoins jamais de vue que ce genre d’approche ne peut être considérée que comme un pis-aller. N’y voyez pas de solution miracle : la génération d’une infobulle pour le title ne peut être efficacement réglée que par l’interface elle-même.

Mais, en attendant que les éditeurs de navigateur se rendent compte qu’il suffirait de faire ce qu’ils font déjà très bien avec les infobulles des champs de formulaire HTML5, ce petit script pourrait améliorer les choses.

Quelques considérations techniques

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, img, abbr, .display-tooltip',
        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 également utiliser 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)

Voilà un très vieux projet (2007, si mes souvenirs sont bons), que l’aventure Access42 me permet de ressortir.

Merci à toute l’équipe pour les relectures, corrections et tests divers.

La page d’accueil du projet est dans la rubrique laboratoire : AccessTooltip - rendre le title accessible au clavier.
Cette page contient des informations importantes pour vos futures contributions.

Si à 53 balais t’as pas un compte Github , t’as loupé ta vie

Le projet est hébergé sur Github  : Access42 : AccessTooltip.

Il carbure à la GPL (GNU General Public License).

Je vous fais pas le discours (pour les vieux ours comme moi, Github c’est un peu comme Facebook pour les parents interloqués quand leur ado annonce fièrement : "t’ain, mortel ! mon dernier statut a été liké à donf")

Checkout !

Notes

[1Pour en savoir plus sur les modes de consultation via les lecteurs d’écran, je vous conseille de lire et relire cet excellent article de Léonie Watson traduit par nos soins : Comprendre les modes d’interaction des lecteurs d’écran

Un message, un commentaire ?

Tous les champs sont obligatoires

Qui êtes-vous ?

Ajoutez votre commentaire ici

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.