Du bon usage des attributs alt et title sur les images et les liens

Les attributs alt et title sont rarement utilisés à bon escient. Présentation de la théorie et d'astuces permettant d'y voir plus clair.

Les attributs alt et title sur les images et les liens sont rarement utilisés à bon escient, voici une petite astuce pour vous aider à y voir plus clair. 

 

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. Il ne doit pas être utilisé sur les images (sauf cas extrêmement spécifiques). 

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. 

Article réalisé par Laurie-Anne (Risk & Compliance Officer, Bruxelles) pour Alsacreations sous licence Creative Commons.