illustration alt tag- We Are the Words

Étiquettes : , ,

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?

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.

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.
    10 fondamentaux pour plus de trafic-We Are the Words

    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.


Commentaires

  1. Avatar Tang dit :

    Merci de ces rappels élémentaires, qui sont souvent laissés de côté par un grand nombre de webmasters en herbe et de blogueurs en apprentissage.
    Cette idée de rapprocher Alt tag et malvoyant est très pertinente, pour expliquer les choix de texte alternatif.
    Je partage

    1. Je vous remercie à mon tour pour votre commentaire, Tang. C’est assez regrettable en effet, à l’heure où on parle de visibilité et d’accessibilité, d’en omettre l’utilité du texte alternatif.

      C’est sur cette dernière note que je vous souhaite un agréable weekend 😉

  2. Avatar Delphy dit :

    Bonjour,

    Je viens de lire votre article bien intéressant mais concrètement je n’ai pas compris comment il faut que je fasse :p

    Merci pour votre aide. Bonne journée

  3. Avatar susane dit :
    Votre commentaire est en attente de modération. Ceci est un aperçu, votre commentaire sera visible après validation.

    merci pour le partage de cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Devenez chroniqueur

Vous souhaitez devenir chroniqueur ou nous soumettre un article? Rien de plus simple.

Ça m'intéresse

#EPW sur Twitter

#EPW sur Facebook

À propos

Votre blog Écrire pour le web en chiffres
  • Plus de 25.000 sessions par mois
  • Plus de 35.000 pages vue chaque mois
  • 1500 abonnés à la newsletter
  • Créé en 2006
  • 1e position dans Google sur des expressions métier
En savoir plus