L’attribut alt
L’attribut alt est fait pour accueillir un contenu alternatif. Il sera utilisé par le navigateur, par l’agent utilisateur en général, au cas où il ne pourrait pas lire l’élément, une image par exemple.
Dans une page web, un certains nombre d’éléments peuvent ne pas être accessible au navigateur, à l’agent utilisateur. Les images, par exemple, ne sont bien évidement pas « lues » par un navigateur vocal ou si un internaute, en bas débit par exemple, a décidé de désactiver les images. Cela peut-être le cas des applets, des objets, des images ; en fait, de tous les éléments graphiques.
Pour que les internautes ne perdent pas pour autant l’information, on fournit à l’agent utilisateur une alternative textuelle. Elle a pour but d’indiquer à l’internaute le contenu de l’applet, de l’objet, de l’image.
Exemple [1] : <img src="images/logo.gif" alt="Logo de Game On Net" />
Tous les objets graphiques doivent fournir une information alternative. Dans le cas d’une image purement décorative, l’attribut alt peut être laissé vide, mais doit être présent.
Exemple : <img src="images/decor-rubrique.jpg" alt="" />
Le contenu du alt doit faire 60 caractères maximum (un caractère encodé vaut pour un).
Si l’objet, par contre, fournit de nombreuses informations, qu’il est impossible ou réducteur de le résumer dans un alt, on utilise alors en complément l’attribut longdesc qui fait appel à un fichier de description plus complet.
Exemple : <img src="images/graphique.gif" alt="Statistiques du site" longdesc="graphique.txt" />
L’attribut title
L’attribut title (non la balise title contenue dans le head et qui apparaît dans la barre de titre du navigateur) est le titre d’un élément.
Il peut être présent pour une image.
Exemple : <img src="images/ventes-2005.jpg" alt="Graphique" title="Evolution des ventes de 2005" longdesc="ventes2005.txt" />
Il est également attendu sur les liens pour fournir une information en plus de celles du libellé.
Exemple : <a href="http://www.site.com/accessibilite.html" title="Lire l'article sur l'accessibilité sur Site">L'accessibilité</a>
Si nous reprennons l’exemple du logo, nous pourrions avoir : <a href="index.html" title="Game On Net - Accueil"><img src="images/logo.gif" alt="Logo Game On Net" /></a>
L’information données par l’attribut title est destinée à tous les types de navigateurs et fournis dons un texte visible par tous. Le texte d’un title apparaît donc dans les navigateurs classiques dans une petite info-bulle, au survol de l’élément.
En cas d’absence de title mais de présence de alt, Internet Explorer affiche le contenu du alt dans l’info-bulle. Et c’est probablement de là qu’est née une partie de la confusion entre ces deux éléments et qui a fait que l’on trouve encore beaucoup de alt dans des balises a (ce qui n’a pas de sens au vu de la fonction du alt). Si les deux attributs sont présents, Internet Explorer utilise le title en priorité pour son info-bulle.
L’attribut title autorise 80 carctères maximum (un caractère encodé vaut pour un).