Du bon usage de l’attribut title

Dans un souci de bien faire, de plus en plus de gens utilisent l'attribut title. De plus en plus de systèmes de gestion de contenu (Dotclear, spip, etc) fournissent directement du code qui produit ce title. Et dans les navigateurs modernes, cet attribut apparaît sous la forme d'une infobulle. C'est une bonne chose, ne nous méprenons pas,  mais souvent l'attribut est problématique pour les logiciels d'assistance aux personnes handicapées : je pense ici en particulier aux déficients visuels.

Mon camarade Philippe écrivit il y a quelque temps un billet pour célébrer la naissance de notre petit dernier, et en le lisant j'ai eu envie de faire cet article. Il m'a gentiment donné l'autorisation de le reproduire ici et de discuter avec vous de l'usage de l'attribut title. Qu'il en soit publiquement remercié !

Voilà ci-dessous, verbatim, le code produit sur son site :

Apparemment bébé va bien. Félicitations donc à la maman. Tous mes voeux à Raphaël. Et une pensée pour le papa qui doit être au four et au moulin.

A noter, le détail troublant des photos qui montrent un peu jusqu'où peu aller la déformation professionnelle du mec qui va jusqu'à refiler ses vieux T-Shirt d'Evolt.org à sa femme le jour de son accouchement. Heureusement pour nous, on a quand échappé au & telecom :)

Le code correspondant à ce billet est le suivant :

<p><a href="http://www.nota-bene.org/Et-voila-Raphael" hreflang="fr" title="Et voilà Raphaël ! en français">Apparemment bébé va bien</a>. Félicitations donc à la maman. Tous mes voeux à Raphaël. Et une pensée pour le papa qui doit être au four et au moulin.</p><p>A noter, le détail troublant des photos qui montrent un peu jusqu'où peu aller la déformation professionnelle du mec qui va jusqu'à refiler ses vieux T-Shirt d'<a href="http://www.evolt.org/" hreflang="en" title="Evolt.org, en anglais">Evolt.org</a> à sa femme le jour de son accouchement. Heureusement pour nous, on a quand échappé au &amp; telecom :)</p>

D'après le W3C, le title donne une information complémentaire sur l'élément qu'il qualifie. Jusque-là, tout va bien, Philippe respire !

Mais là où les choses se gâtent, c'est quand entrent en jeu les revues d'écran qu'utilisent les mal- et non-voyants. Par exemple, sur mon poste de travail est installé JAWS. Or, parmi les réglages de JAWS, l'utilisateur a le choix de lire le texte tel qu'il est présenté, et là tout ira bien, ou de lire l'information la plus longue des deux.

Dans notre cas, voilà ce que donne une lecture par JAWS configuré par défaut :

[LIEN] Apparemment bébé va bien. Félicitations donc à la maman. Tous mes voeux à Raphaël. Et une pensée pour le papa qui doit être au four et au moulin.

A noter, le détail troublant des photos qui montrent un peu jusqu'où peu aller la déformation professionnelle du mec qui va jusqu'à refiler ses vieux T-Shirt d'[LIEN] Evolt.org à sa femme le jour de son accouchement. Heureusement pour nous, on a quand échappé au & telecom :)

Tout va toujours bien. Mais un utilisateur finit par s'aguerrir, surtout au contact des gens chargés de rendre les sites accessibles, et il aura tôt fait de trouver le réglage permettant de lire, du title ou de l'intitulé du lien, le plus long des deux, et après tout c'est logique : si une chaîne de texte est plus longue que l'autre, il y a fort à parier qu'elle comportera plus d'informations.

Comme Monsieur Jourdain, certains auteurs de sites ne le font pas exprès. Leurs liens « Lire la suite » comportent un title « Lire la suite de 'le sucre augmente encore' ». Tout va bien, notre client va s'y retrouver.

Mais (vous voyez où je veux en venir) sur la base du bout de code que j'ai chipé chez Philippe, voilà ce que lit ma revue d'écran :

[LIEN] Et voilà Raphaël ! en français. Félicitations donc à la maman. Tous mes voeux à Raphaël. Et une pensée pour le papa qui doit être au four et au moulin.

A noter, le détail troublant des photos qui montrent un peu jusqu'où peu aller la déformation professionnelle du mec qui va jusqu'à refiler ses vieux T-Shirt d'[LIEN] Evolt.org, en anglais à sa femme le jour de son accouchement. Heureusement pour nous, on a quand échappé au & telecom :)

Ah, voilà, c'est là qu'il voulait en venir !

Je ne dis pas, dans notre exemple, que le texte est illisible, mais il commence à perdre un peu du sens d'origine. La plupart du temps il devient carrément abscons.

Mais que faire, alors, que faire ? Enfin, comment allons-nous sortir de cette ornière ? Existe-t-il seulement une méthode éprouvée ? Et surtout, quand est-ce qu'on mange ? Quelle est la solution ? Et au fait, c'était quoi la question, au début ?

Pour savoir si vous avez correctement écrit votre title :

1. Partez du principe que je peux lire le texte, le title, ou les deux.
2. Ne copiez pas exactement le texte dans le title si vous n'y ajoutez rien.
3. En revanche, mettez dans le title au moins autant d'information que dans le texte.
4. Efforcez-vous de lire votre page en remplaçant mentalement le texte par le title.
5. Prenez votre title comme du texte normal : mettez des parenthèses pour les informations supplémentaires, c'est ce que vous auriez fait sans le title.

Voilà donc ce qu'on pourrait suggérer pour améliorer le contenu de ce billet :

Apparemment bébé va bien. Félicitations donc à la maman. Tous mes voeux à Raphaël. Et une pensée pour le papa qui doit être au four et au moulin.

A noter, le détail troublant des photos qui montrent un peu jusqu'où peu aller la déformation professionnelle du mec qui va jusqu'à refiler ses vieux T-Shirt d'Evolt.org à sa femme le jour de son accouchement. Heureusement pour nous, on a quand échappé au & telecom :)

Vous voyez, il a finalement suffi de peu de choses pour faire la vie plus belle ! Sortez en rang, et sans bruit.