nota-bene.org > Sur le web > Du bon usage de l’attribut title

Du bon usage de l’attribut title

À propos de cet article

Un article de Stéphane

Publié le 6 janvier 2007

URL courte : http://nota-bene.org/142

4 commentaires

Quand 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 &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.


Commentaires

    • 6 janvier 2007

    Merci pour ces précisions, vraiment.

    Par contre (pour Philippe), dans la mesure où la langue de la page est en français, est-il vraiment nécessaire ou utile de spécifier un hreflang="fr" ?
    Il me semblait que non.

    Cette question est uniquement vouée à assouvir ma curiosité, bien sûr. sourire

    http://arkhi.org/

    Répondre à an.archi

    • 6 janvier 2007
    • en réponse à an.archi

    Je peux te faire une confidence, mais tu ne le répètes pas ?

    Je suis une grosse feignasse.

    Donc j’évite de décrire la méta-information qu’on peut déduire du contexte, donc j’ai tendance à effectivement ne pas préciser de hreflang quand c’est dans la même langue que moi. (le lecteur attentif aura remarqué que j’ai mis deux « donc » de suite et que j’ajoute l’inélégance à la fainéantise)

    Ceci dit je crois me rappeler que dotclear demande systématiquement le hreflang en cours de route quand on insère un lien.

    Répondre à Stéphane

    • 10 janvier 2007

    Tout simplement merci pour ces précisions.

    20cent.net

    Répondre à 20cent

    • 10 janvier 2007
    • en réponse à an.archi

    Oui je confirme Dotclear demande la langue du lien quand il insère un nouveau pointeur. Ceci dit comme j’écris généralement tout à la main, ce n’est pas là que se situe le problème.

    Si quelque soit le lecteur, celui-ci est capable de dire : "l’auteur de cette page écrit en français, donc s’il pointe vers une page sans en préciser la langue, c’est que celle-ci doit être en français",alors le hreflang="fr" ne sert effectivement à pas à grand chose.

    Comme je n’en suis pas sûr, je préfère préciser, mais j’ai l’impression que je dois bien être le seul et que ce n’est en effet pas très utile sourire

    Répondre à philippe

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile