< Search/Acquisition, Web Analytics/Conversion & Web Social/Relation />

Google nous rappelle que si l'on veut changer les règles du jeu, on doit construire sa réussite sur le risque de l'expérimentation. (Antoine Riboud)

L’attribut Title sur les images est-il nécessaire ? / 20 septembre 2007

Je profite, une fois n’est pas coutume, pour publier un court synopsis riche d’enseignement sur le sujet des attributs ALT et TITLE. Un fil de discussion sur la liste du GTA m’a effectivement interpellé, et la réponse de Jean-Pierre Villain, de la société Qelios, je l’espère, permettra à certains d’entre nous de clarifier ce point délicat.

Les navigateurs Netscape, Firefox et tous les autres navigateurs affichent très correctement l’attribut ALT lorsque les utilisateurs désactivent les images. Cette caractéristique est précisement spécifiée par la norme HTML.

Or, ce n’est pas le cas de l’attribut TITLE, qui a, quant à lui, pour vocation d’apporter des informations complémentaires. L’attribut TITLE n’est pas une alternative, contrairement à l’attribut ALT, mais une aide supplémentaire. Il ne doit donc pas être affiché lorsque les utilisateurs désactivent les images.

Doubler l’attribut ALT d’un attribut TITLE pour une image ne sert donc à rien.

La confusion sur le rôle de l’attribut TITLE pour les images est né du comportement d’IE qui affiche le contenu de l’attribut ALT au survol du pointeur. La pratique qui s’est ensuite répandue fut donc de doubler l’attribut ALT avec un attribut TITLE pour simuler sur le moteur Gecko ce comportement.

Internet Explorer affiche bien le TITLE des images dans une infobulle (tout comme Firefox), mais il affiche le ALT lorsque le title est absent.

Il suffit de tester, notamment sous IE6 :

  • title présent : title affiché,
  • alt présent et title présent : title affiché,
  • alt présent mais pas de title : alt affiché.

Seulement, sur ce point, IE à tort, il ne devrait pas afficher le contenu de l’attribut ALT au survol. IE fait donc du zèle, ce qui toutefois moins condamnable que si son comportement était erroné …

Doubler l’attribut ALT avec un attribut TITLE pour une image n’a strictement aucune utilité en dehors de se compliquer le travail.

sources :

  • Jean-Pierre Villain, Expert accessibilité, Qelios, membre du GTA
  • Thierry Fanchon, Expert accessibilité, La Banque Postale, membre du GTA

4 commentaires

  1. Bonjour,

    Effectivement lorsqu’on parle d’accessibilité pure, « Doubler l’attribut ALT d’un attribut TITLE pour une image ne sert donc à rien ».

    Cependant afin d’être plus complet il est trés intéressant de signaler que ce « doublon » offre des possibiltés au webmaster pour le référencement de son site ( voir des images de ce site: Google images ).

    Aze

    Commentaire par aze — 2 octobre 2007 @ 10:13

  2. Bonjour,
    Je ne comprends pas. Dites-vous que l’attribut TITLE sert pour le référencement ? Parce que Google ne tient pas compte de cet attribut TITLE lors de son indexation.
    Cf le billet : http://www.my.epokhe.com/2007/06/14/google-attributs-alt-title/

    Commentaire par aldbriand — 2 octobre 2007 @ 11:32

  3. Bonjour, tu dis toi même qu’IE utilise mal cet attribut (ALT) et affiche son contenu au survol de la souris, donc quel autre moyen y a t-il que de le coupler à un TITLE pour enpêcher IE de l’afficher ? (le Title étant vide dans ce cas).
    De plus si dans les autres navigateurs je souhaite un affichage au survol je n’ai le choix que du Title on est d’accord, et comme le Alt est nécessaires pour l’accessibilité, on est encore obligé de les coupler…
    Enfin si on ajoute les besoins de référencement évoqués par « aze »…3 raisons de les coupler.

    Commentaire par himaon — 5 avril 2008 @ 14:56

  4. Bonjour et merci pour votre commentaire,
    Je ne pense qu’il soit nécessaire d’empêcher IE d’afficher le ALT au survol étant donné que c’est un comportement erroné. De plus, l’attribut TITLE est inutile pour le référencement, il n’est légitime que si l’auteur doit apporter des informations complémentaires, sur des liens non explicites et des liens identiques. Si l’on souhaite un affichage au survol, j’opterais pour une alternative plus réactive via des CSS :

    a.info {
    position:relative; /*this is the key*/
    z-index:24; background-color:#F7F5F5;
    color:#666666;
    text-decoration:none;
    }

    a.info:hover { z-index:25; background-color:#fff; }

    a.info span { display: none; }

    a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    line-height:16px;
    border:1px solid #666666;
    background-color:#f5f5f5; color:#000;
    text-align: center;
    }

    cf. le site http://www.fidef.fr dans le module « Diagnostic Robien recentré / Borloo ».
    A vous lire,
    Arnaud.

    Commentaire par aldbriand — 5 avril 2008 @ 15:39

Flux RSS des commentaires de cet article.

Désolé, les commentaires sont fermés pour le moment.

Twitter epokhe - Arnaud Briand Haut de page