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. 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 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 quelle balise 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 la balise <abbr> pour les abréviations (usage prévu dans la spécification du W3C) n’est pas tout à fait assuré (page en anglais).

Quand et comment utiliser l’attribut title

L’ouverture d’un lien dans une nouvelle fenêtre

L’utilisateur ou l’utilisatrice doit ê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 difficilement avec des dispositifs adaptés (handicap moteur). Généralement, on ne souhaite pas voir cette information dans l’intitulé de chaque lien ; on va 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 doit ê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 les utilisateurs et utilisatrices de mobile aient la même information. 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 utile aussi aux utilisateurs et utilisatrices du site sur leur mobile :

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

Un champ de formulaire sans libellé

Il arrive aussi que des designers qui ne connaissent pas l’accessibilité fassent des maquettes de formulaire avec des champs sans libellé (balise <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 d’être sûr 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 le libellé du 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.

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