Suite à l’article dédié à l’attribut alt (Comment utiliser les attibuts alt et title 1ère partie), intéressons-nous cette fois-ci au title, véritable complément d’information. Il s’agit bien sûr de l’attribut et non de la balise html.

L’attribut title

Pour citer le W3C, «cet attribut fournit des informations consultatives concernant l’élément sur lequel il se place ». Il n’est surtout pas une alternative à un élément graphique et ne doit donc pas apparaître lors du non-affichage de celui-ci.

Quel est son rôle et sa pertinence ?

L’attribut title est nécessaire si l’intitulé du lien ne peut se suffire à lui-même. Ainsi, s’il donne la même information que le lien (voir l’exemple ci-dessous), il est considéré comme non-pertinent.

Voici quelques unes de ses bonnes utilisations :

• Rendre explicite un lien hors contexte : nous trouvons souvent des liens sous la forme de « lire la suite » ou « en savoir plus » qui, mis hors contexte, ne servent à rien puisque l’internaute se demandera « lire la suite » de quoi ? « En savoir plus » sur quoi ?
  En y appliquant l’attribut title, la compréhension du lien est retrouvée. Pour comprendre, passez votre souris sur le lien suivant :  En savoir plus
• Informer de l’ouverture d’un nouvel onglet ou fenêtre
• Apporter une information supplémentaire sur un document à télécharger, tel que le poids, la taille…

Je vous propose 2 exemples afin d’illustrer son bon ou mauvais emploi.

1. L’utilisation du title sur les liens (survolez les liens avec votre souris)

Non pertinent

En septembre prochain, Perpignan sera le rendez-vous du Festival Visa pour l’image.

Pertinent

En septembre prochain, Perpignan sera le rendez-vous du Festival Visa pour l’image.

2. L’utilisation du alt et du title sur une image lien (survoler les images avec votre souris)

Non pertinent
Sur cet exemple, l’attribut alt de l’image et l’attribut title du lien sont similaires.
Le alt, décrit bien ce qu’est l’image (le logo du festival) mais l’attribut title n’apporte rien.
On ne sait pas où va nous mener le lien et nous n’avons aucune information complémentaire à l’image. Dans ce cas, il ne sert à rien d’insérer un title.

1
2

<a title="Logo du festival Visa pour l'image 2009" href="http://blog.nethik.fr/wp-content/uploads/2009/08/logo-visa.png"><img class="alignleft" src="http://blog.nethik.fr/wp-content/uploads/2009/08/logo-visa.png" alt="Logo du festival 'Visa pour l'image'" width="185" height="98" />
</a>

Pertinent
Sur ce second exemple, l’attribut alt de l’image et l’attribut title du lien sont différents.
Le alt, décrit bien ce qu’est l’image (le logo du festival) et l’attribut title apporte une information sur le lien.
On sait où va mener le lien et on a comme supplément d’information le thème du festival (le photojournalisme).

1

<a title="Accueil du site du Festival International de photojournalisme Visa pour l'image" href="../wp-content/uploads/2009/08/logo-visa.png"><img class="alignleft" src="../wp-content/uploads/2009/08/logo-visa.png" alt="Logo du festival Visa pour l'image 2009" width="185" height="98" /></a>

Pour terminer ce point, j’ai envie de dire prudence !

Il faut être vigilant à ne pas insérer de manière automatique un title à un lien. Le but serait d’avoir dans un maximum de cas un libellé de lien explicite qui se suffit.
Pour illustrer cette pratique avec parcimonie, je citerai Amélie Boucher, ergonome de référence : «Si l’internaute a l’impression de réfléchir et doute de l’issue de son clic, alors vous avez perdu la première partie de la bataille»…. mais ceci pourrait faire l’objet d’un autre article sur le bon usage et emploi des liens.

Comment est-il interprété par les navigateurs alternatifs ?

L’attribut title doit aussi être utilisé avec parcimonie car les navigateurs et les lecteurs d’écran l’interprètent différemment ce qui est souvent source de confusion.

Prenons par exemple Jaws, le lecteur d’écran synthétiseur vocal et interprète braille.

Logo du logiciel Jaws

Par défaut, ce logiciel donne la priorité au alt sur le title. Ce dernier ne sera lu que si le alt est absent (erreur html) ou vide.

Dans le cas où le title est lu, vous pouvez très vite comprendre l’intérêt de ne pas le remplir avec le même contenu que l’intitulé du lien. La synthèse vocale lira en effet l’intitulé du lien puis le title du lien…. et l’utilisateur entendra deux fois la même chose !

Les paramètres de configuration peuvent bien sûr être modifiés mais n’est-il pas préférable de tenir compte des paramètres configurés par défaut ?
Les utilisateurs non avertis ou non initiés ne gardent t-il pas la plupart du temps les paramètres prédéfinis ?

Pour finir, il est important de savoir que cet attribut n’est pas pris compte par la navigation clavier avec tabulations.

Et vous, connaissez-vous d’autres comportements pour cet attribut ?