StéphaneQuand on écrit un lien, on ajoute de plus en plus souvent un title. Voilà quelques principes de base pour améliorer l’accessibilité de vos liens.
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 & 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 :
- Partez du principe que je peux lire le texte, le
title, ou les deux. - Ne copiez pas exactement le texte dans le
titlesi vous n'y ajoutez rien. - En revanche, mettez dans le
titleau moins autant d'information que dans le texte. - Efforcez-vous de lire votre page en remplaçant
mentalement le texte par le
title. - Prenez votre
titlecomme du texte normal : mettez des parenthèses pour les informations supplémentaires, c'est ce que vous auriez fait sans letitle.
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.
