Comment utiliser les attributs alt et title ?

Les attributs alt et title sur les images et les liens sont rarement utilisé à bon escient. Pourtant, leur usage est fortement recommandé, et leur compréhension essentielle.

La théorie

L'attribut alt

alt doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives). Il sert à apporter la même information que l’image (en général le texte qu’elle porte) dans le code de la page. Le but de ce report d’information est que celle-ci reste disponible lorsque l’image ne peut être chargée (à cause d’une surcharge de serveur ou d’un problème de connexion...) ou qu'elle ne peut être vue (par un robot de moteur de recherche ou un utilisateur de lecteur d’écran...).

L'attribut title

title, quant à lui, peut être utilisé sur les liens, pour apporter une information nécessaire à la bonne navigation du visiteur et supplémentaire à l'intitulé du lien. C'est un attribut facultatif, et très rarement nécessaire. Un title reprenant à l'identique l’intitulé du lien est totalement inutile et redondant.

La pratique

<a href="index.htm" title="Retour à l'accueil"><img src="accueil.gif" alt="Accueil"></a>

Incorrect : Le title n’apporte pas une information supplémentaire, il est redondant avec l’intitulé du lien.

<a href="index.htm"><img src="accueil.gif" alt="Image menu bouton accueil"></a>

Incorrect : L’alt contient bien plus d’information que l’image n’en porte. L’information ajoutée apporte une couche de « bruit » qui noie l’information importante.

<a href="index.htm"><img src="accueil.gif" alt="Puce décoration">Accueil</a>

Incorrect : Une puce personnalisée est une image purement décorative, le alt devrait être vide.

<a href="index.htm" alt="Accueil"><img src="accueil.gif" title="Accueil"></a>

Incorrect : Alt ne doit pas être placé sur <a>. Une image doit toujours avoir un attribut alt.

<a href="index.htm">
<img src="accueil.gif" alt="Accueil">
</a>

Correct : Nul besoin d’apporter plus d’information que nécessaire.