Le vaste monde des alternatives textuelles : l’attribut title (3/6)

Petite clarification avant de commencer : tout comme pour l’attribut alt, on ne dira pas non plus balise <title> pour parler de l’attribut title. C’est encore plus problématique d’employer le mauvais mot dans ce cas car les deux existent. En employant le mauvais mot, on a vite fait de perdre les développeurs et développeuses en faisant des recommandations erronées.

L’attribut title permet d’apporter de l’information complémentaire à certains éléments pour des personnes qui naviguent à la souris ou avec un lecteur d’écran, par exemple. Son principal défaut est de ne pas pouvoir s’afficher en navigation tactile donc mobile notamment, ni au clavier ou au pilotage à la voix. Il est donc à utiliser en dernier recours et avec parcimonie. Pour que les informations soient accessibles à tous les utilisateurs et utilisatrices, mieux vaut donner les informations directement de façon visible que de les cacher dans un attribut title.

Je précise, s’il est nécessaire, que l’attribut title n’a aucun impact pour le référencement de son site.

Quelques points sur l’utilisation de l’attribut title

• Il n’est pas obligatoire et on ne doit pas recommander aux contributeurs et contributrices de le remplir à chaque fois. Dans la plupart des cas, il est inutile voire problématique. En effet, selon les lecteurs d’écran et leur configuration, il peut arriver que, pour un lien avec un attribut title, le lecteur d’écran lise soit l’intitulé du lien (le texte entre l’ouverture de balise <a> et sa fermeture </a>), soit son attribut title, soit les deux. Il ne devra donc jamais être vide : soit, il est renseigné de façon pertinente, soit, il n’est pas présent.
• S’il est identique à l’intitulé du lien, il est inutile et rendra la restitution par le lecteur d’écran trop lourde. Il vaut donc mieux le supprimer.
• Techniquement, il est possible de mettre un attribut title sur n’importe quel élément HTML. Cependant, dans la plupart des cas, il ne pourra être restitué par les lecteurs d’écran que s’il est sur un élément interactif (lien, bouton, champ de formulaire) ; même sa présence sur l’élément <abbr> pour les abréviations (usage prévu dans la spécification du W3C) n’est pas assuré (page en anglais).

Quand et comment utiliser l’attribut title

L’ouverture d’un lien dans une nouvelle fenêtre (non conseillé)

L’utilisateur ou l’utilisatrice devrait être prévenue lorsqu’on lui force l’ouverture d’un lien dans une nouvelle fenêtre (attribut target="_blank") car cela peut être déroutant notamment pour les personnes aveugles ou naviguant parfois difficilement avec des dispositifs adaptés (handicap moteur). Généralement, les gens ne souhaitent pas voir cette information dans l’intitulé de chaque lien (ce qui serait pourtant utile) ; on peut donc « cacher » cette information dans un attribut title. Pour que ce soit tout de même un peu plus clair, on peut y ajouter une petite icône (souvent un carré avec une flèche qui sort du coin en haut à droite et pointe vers cette même direction). L’attribut title devra, dans ce cas, reprendre l’intitulé du lien et y ajouter l’information « Nouvelle fenêtre ». Par exemple :

<a href="mon-url" title="Intitulé du lien - Nouvelle fenêtre">
    Intitulé du lien
</a>

On pourra toutefois préférer l’utilisation d’une icône avec alternative ; soit une balise <img> avec un attribut alt="Nouvelle fenêtre", soit une icône en CSS avec alternative masquée (voir l’article 5/6 de cette série) :

<a href="mon-url">
    Intitulé du lien
    <span class="icon" aria-hidden="true"></span>
    <span class="sr-only"> - Nouvelle fenêtre</span>
</a>

Un fichier en téléchargement (non conseillé)

De la même façon, l’utilisateur ou l’utilisatrice devrait être prévenue lorsqu’il s’agit d’un lien de téléchargement de fichier en indiquant le format, le poids et la langue du fichier (si elle diffère de la langue courante de la page). Il est préférable de l’écrire dans l’intitulé du lien pour que l’information soit disponible dans tous les contextes de navigation (souris, clavier, tactile, pilotage à la voix…). Cependant, il peut être toléré de mettre l’information en attribut title :

<a href="mon-fichier.pdf" title="Télécharger le rapport 2017 - PDF - 1Mo - Anglais">
    Télécharger le rapport 2017
</a>

On préfèrera toutefois le code suivant qui sera bien plus utile dans tous les contextes :

<a href="mon-fichier.pdf">
    Télécharger le rapport 2017 - PDF - 1Mo - Anglais
</a>

Préciser l’action d’un bouton

On peut également avoir besoin de préciser l’action d’un bouton. Par exemple, un bouton de validation d’un formulaire de recherche pour lequel on a choisit de mettre « OK » comme intitulé aura besoin d’être plus précis. On ajoutera un attribut title de cette façon :

<button type="submit" title="OK - Rechercher">OK</button>

On pourra également se servir d’un attribut aria-label (voir l’article 6/6 de cette série). Il sera alors uniquement accessible aux personnes utilisant des technologies d’assistance et non plus aux utilisateurs et utilisatrices de souris.

On préfèrera tout de même avoir un bouton avec un intitulé explicite par défaut plutôt que d’utiliser ce genre de subterfuge.

Un champ de formulaire sans libellé (<label>)

Il arrive aussi que des designers qui ne connaissent pas l’accessibilité fassent des maquettes de formulaire avec des champs sans libellé (élément <label>) ; cela arrive très souvent pour un champ de recherche dans le site. Dans ce cas, il est admis de placer un libellé comme « Mots-clés de la recherche » comme attribut title du champ :

<input type="search" title="Mots-clés de la recherche" />

Un champ de formulaire avec un attribut placeholder

Un champ de formulaire disposant d’un attribut placeholder doit, de son côté, disposer d’un attribut title identique afin de s’assurer que l’utilisateur ou l’utilisatrice de lecteur d’écran ne perde pas d’information si le placeholder n’était pas restitué :

<input type="text" placeholder="Adresse, gare, arrêt de métro, etc." title="Adresse, gare, arrêt de métro, etc." />

Notes complémentaires :

• Attention à veiller au contraste de l’attribut placeholder qui est bien souvent insuffisant ;
• L’utilisation de cet attribut est généralement déconseillée car, une fois qu’on a commencé à saisir, on ne voit plus ce qui sert de libellé au champ. C’est très problématique quand on souhaite revenir en arrière sur un champ mais qu’on ne se souvient plus de son libellé. Par ailleurs, cela peut poser de sérieux problèmes à des personnes avec des troubles de la mémoire, par exemple. Et ce n’est pas l’attribut title qui va résoudre ces problèmes dans tous les contextes de navigation…

Rendre les informations visibles à toutes et tous

En résumé, mieux vaut former les designers (entre autres) et leur expliquer que les informations doivent être visibles.

Par conséquent, on devrait :

• prévoir une icône, si ce n’est un texte, pour rendre les liens externes visuellement différenciables même sur un écran tactile (son utilisation peut être automatisée) ;
• indiquer le poids, le format et la langue des fichiers en téléchargement dans l’intitulé du lien ;
• prévoir des intitulés de boutons pertinents (« Rechercher » à la place de « OK ») ;
• mettre un libellé visible avant chaque champ de formulaire ;
• mettre un libellé qui ne disparaisse pas à la saisie pour chaque champ de formulaire.

Ressources complémentaires

• « Title Texts Suck », par Axess Lab (en anglais) ;
• « L’attribut title : à consommer avec modération », par Romy Duhem-Verdière.