Décoration, émotion, information: l'image d'un contenu Web est souvent conçue pour ces trois fonctions. Convenez alors de l'alt tag le plus approprié. 

L'alt tag ou texte alternatif

Mais d'abord, qu'est-ce qu'un alt tag? Qu'elle soit décorative, informative ou sensorielle (comprenez émouvante), l'image d'une page Web doit comporter un texte alternatif ou alt tag. Ce texte alternatif, inséré dans le langage HTML, sert à optimiser la visibilité de votre image.

Utilisé à bon escient, l'alt tag offre une alternative textuelle aux logiciels de revue d'écran (destinés aux utilisateurs malvoyants) et une description sémantique (mots-clés, synonymes) aux moteurs de recherche.

L'utilité de l'alt tag

Vous vous en doutez, tous ces programmes sont aveugles, ils sont incapables d'identifier ce qu'expriment les images en ligne. Il est nécessaire pour les développeurs Web de préciser à tous les internautes le contenu et la fonction de ces médias enrichis. En procédant de cette manière, vous vous assurez de rendre vos illustrations digitales plus visibles et plus accessibles pour tous.

Comment configurer votre alt tag?

[pullquote]Imaginez que vous décrivez l'image de votre site Web à quelqu'un qui ne peut la voir... Cette démarche vous aidera sans doute à choisir les bons alt tag de vos images.[/pullquote]

Tout dépend du type d'image et du contexte dans lequel elle se trouve. Le texte alternatif peut donc apparaître de deux manières:

• Soit dans le contenu qui entoure l'image elle-même.

  

  L'alt ta n'est pas nécessaire, car la fonction de l'image est précisée dans son contenu.

• Soit dans l'attribut alt de la balise img.

Quoiqu'il en soit, un alt tag doit être précis, court et équivalent au contenu de l'image.

Image décorative

Si l'image occupe une place décorative sur la page et qu'elle est à proximité d'un contenu qui la décrit, optez plutôt pour le texte alternatif: (alt=" "). Soit un alt tag vide.

Image informative

• Lorsqu'une image n'est en réalité qu'un lien hypertexte, précisez la fonction de l'image dans l'alt tag. Exemple: (alt="bien écrire pour le Web")
• Dans le cas où l'image duplique un lien situé à proximité, préférez la balise ancre pour créer ainsi un seul lien. Par exemple: les liens retour des FAQ.
• Lorsque l'info est trop longue, utilisez l'attribut longdesc de la balise image pour lier l'image à une page où l'info peut être plus complète.

Image émotive

Enfin, si l'image est une oeuvre d'art; une peinture, une sculpture, tableau, etc. Choisissez la légende plutôt que l'alt tag. Ainsi, vous pouvez décrire plus longuement  les caractéristiques de cette image: nom de l'oeuvre, de l'artiste, année, pays

En résumé

Pour le dire autrement, imaginez que vous décrivez l'image de votre site Web à quelqu'un qui ne peut la voir... Cette démarche vous aidera sans doute à choisir les bons alt tag de vos images.

Des conseils, des remarques, des suggestions? Commentez cet article et partagez avec nous votre savoir-faire. Merci d'avance.