Comprendre l’importance des attributs alt

Qu’est-ce que l’attribut alt et pourquoi il compte ?

L’attribut alt (pour texte alternatif) décrit le contenu d’une image dans le code HTML :

S’il y a un problème d’affichage, ce texte apparaît à la place de l’image. Surtout, il est lu par les technologies d’assistance (lecteurs d’écran) et sert de signal sémantique aux moteurs de recherche. Bien rédigé, il améliore l’accessibilité, l’expérience utilisateur et le SEO.

Accessibilité : donner du sens aux images

• Lecteurs d’écran : le alt est la description vocale d’une image. Sans lui, l’utilisateur perçoit un “image…” vide de sens.

• Compréhension du contenu : un bon alt replace l’image dans le contexte éditorial, pas dans l’absolu.

• Navigation : il évite les impasses (surtout pour les images-liens ou les icônes de boutons).

Quand utiliser alt="" (vide)

• Images décoratives qui n’apportent aucune information (traits, fonds, motifs) :

  <img src="ornement.svg" alt="" aria-hidden="true">


  On les rend silencieuses pour ne pas polluer la lecture.

SEO : un signal pertinent mais à manier avec mesure

Les moteurs ne “voient” pas les pixels ; ils interprètent ce que vous déclarez. Un alt pertinent :

• Donne du contexte à la page et à l’image (utile pour Google Images).

• Améliore la pertinence globale s’il reprend naturellement les termes du sujet.

• Évite le bourrage de mots-clés : restez naturel, spécifique, concis.

Bonnes pratiques de rédaction

1. Décrivez ce que l’image montre + l’intention dans la page.
   Mauvais : alt="image de chaussure"
   Bon : alt="Escarpins en cuir noir à bout pointu, collection hiver 2025"

2. Soyez concis : visez 5 à 15 mots (ou ~80–140 caractères si nécessaire).

3. Évitez les préfixes inutiles : pas de “photo de”, “image de”, “visuel de” (le lecteur d’écran annonce déjà qu’il s’agit d’une image).

4. Adaptez au rôle de l’image :

   • Fonctionnelle (image-lien/bouton) : décrivez l’action, pas l’image.

     <a href="/panier">
<img src="cart.svg" alt="Voir le panier">
</a>


   • Logo : utilisez le nom de l’organisation.

     <img src="logo.svg" alt="Maison Dupont">


   • Infographie/graphique : alt court + légende ou description détaillée à proximité (<figcaption>, lien “En savoir plus”).

     <figure>
<img src="ventes-2024.png" alt="Évolution des ventes 2020–2024, tendance haussière">
<figcaption>Détails chiffrés dans le tableau ci-dessous.</figcaption>
</figure>


5. Langue et précision : employez la langue de la page, des termes clairs, évitez le jargon non indispensable.

6. Images contenant du texte : si le texte est indispensable (ex. affiche), reprenez-le dans le alt ou, mieux, dans la légende accessible.

Cas particuliers fréquents

• Icônes décoratives dans des boutons avec du texte déjà présent :

  <button>
<img src="download.svg" alt="" aria-hidden="true"> Télécharger le guide
</button>


• SVG inline : préférez <title> pour l’accessibilité, et role="img" si nécessaire.

• Images de produits variables : générez dynamiquement un alt utile : “Robe midi en soie, bleu nuit, taille 38”.

Erreurs courantes à éviter

• Oublier l’attribut : c’est un défaut d’accessibilité et une occasion SEO manquée.

• Descriptions vagues : “image”, “photo”, “bannière”.

• Texte trop long ou marketing (“le meilleur du marché, incroyable…”) : restez factuel.

• Bourrage de mots-clés : “sac luxe, sac femme luxe, sac cuir luxe” nuit à la compréhension.

Exemples concrets

• Bonne pratique

  <img src="plage-coucher-soleil.jpg"
alt="Coucher de soleil sur plage de sable avec palmiers">


• Mauvaise pratique

  <img src="plage.jpg" alt="Image de plage">


• Image-lien

  <a href="/lookbook-ete">
<img src="vignette-lookbook.jpg" alt="Ouvrir le lookbook été">
</a>


Intégration éditoriale et process

• Checklist dans le CMS : champ alt obligatoire, aide contextuelle avec exemples.

• Formation des équipes : designers, rédacteurs, intégrateurs—tout le monde doit connaître la règle “décrire l’intention”.

• Audit régulier : outils d’accessibilité/SEO pour repérer images sans alt ou alt non pertinents.

• Gouvernance : définissez qui rédige, qui relit, et à quel moment (ex. lors du QA pré-publication).

Mini check-up en 7 questions

1. L’image est-elle informative ou purement décorative ?

2. Le alt décrit-il ce qui est utile dans le contexte de la page ?

3. Est-il concis, naturel, sans “image de / photo de” ?

4. Pour une image-lien, le alt décrit-il l’action ?

5. Pour un graphique, ai-je ajouté une légende ou un lien vers les données ?

6. La langue, l’orthographe et la terminologie sont-elles correctes ?

7. Le alt évite-t-il le bourrage de mots-clés ?

À retenir

L’attribut alt est un petit détail au grand impact : il ouvre vos contenus aux personnes qui ne voient pas les images, il clarifie votre message pour les moteurs de recherche, et il renforce la qualité globale de votre site.

Adoptez une démarche simple : décrire l’intention, rester concis, distinguer les images informatives des décoratives, et instaurer un process d’audit. Votre accessibilité grimpe, votre SEO respire, votre expérience utilisateur gagne en clarté.

Source : Lire l’article original