Qu’est-ce que l’attribut alt en HTML ?

Vous ajoutez des images à votre site ?
C’est bien.

Mais si vous oubliez l’attribut alt, une partie de vos visiteurs... ne verra rien.
Et Google non plus.

Dans cet article, on vous explique ce qu’est l’attribut alt, pourquoi il est obligatoire, comment bien le rédiger - et pourquoi on parle (à tort) de balise alt.

Balise ou attribut : on pose les bases

En HTML, une balise structure une page.
Exemple : img, h1, p, a, div, etc.

Un attribut est une information qu’on ajoute à une balise pour la préciser.

Prenons cette image :

<img src="chien.jpg" alt="Un chien qui court dans un champ">

Ici :

• img est la balise
• alt est un attribut
• "Un chien qui court dans un champ" est sa valeur

Où se trouve l’attribut alt ?

L’attribut alt se place dans la balise <img>, juste après src.

Exemple :

<img src="boulanger.jpg" alt="Un boulanger qui sort une baguette du four">

À quoi sert l’attribut alt ?

Pour l’accessibilité

Les personnes malvoyantes naviguent avec des lecteurs d’écran. Ce sont des logiciels qui lisent à voix haute le contenu des pages web.

Quand l’image est affichée, le lecteur d’écran lit le texte du alt pour décrire ce que voit l’utilisateur voyant.

Sans attribut alt, ces personnes ne sauront jamais ce que l’image représente.

Pour le référencement naturel (SEO)

Google ne “voit” pas les images. Il lit le texte du alt pour comprendre le contenu visuel.

Résultat :

• Un attribut alt bien rédigé peut améliorer le SEO de votre page.
• Il augmente vos chances d’apparaître dans Google Images.

Pourquoi l’attribut alt est-il obligatoire ?

• Parce que c’est une règle du HTML.
  -> L’attribut alt est obligatoire dans chaque balise img, même si sa valeur est vide.
• Parce que c’est une exigence d’accessibilité (RGAA, WCAG).
  -> Un site web accessible, c’est un site lisible par tous, quelle que soit la situation.
• Parce qu’il est utile pour le référencement et l’expérience utilisateur.

Comment bien rédiger un attribut alt ?

Règle simple : décrivez ce que l’image montre. Ni trop long, ni trop vague. Juste utile.

Quelques conseils :

• -> Soyez descriptif, pas technique.
• -> Pas besoin de dire “image de...”, c’est déjà une image.
• -> N’utilisez pas de mots-clés en masse, ça ne sert à rien.

Exemples

<!-- Correct -->
<img src="chaton.jpg" alt="Un chaton qui dort dans un panier en osier">

<!-- Mauvais -->
<img src="chaton.jpg" alt="image1.jpg">
<img src="chaton.jpg" alt="chat chaton mignon SEO marketing Marseille">

Faut-il toujours mettre un alt ?

Oui... sauf dans un seul cas : si l’image est purement décorative.

Exemples :

• Une bordure en bas de page.
• Une icône qui n’apporte aucune info.
• Un motif de fond.

Dans ce cas, on écrit :

<img src="pattern.svg" alt="">

L’attribut est présent (car obligatoire), mais vide pour signaler au lecteur d’écran : " ignore cette image ".

Et pour les logos ?

• Si le logo a une fonction (ex. clic vers la page d’accueil)
  -> utilisez un alt clair, comme : alt="Socium Web - Accueil".
• Si le logo est juste là pour l’esthétique
  -> laissez alt="".

En résumé

• L’attribut alt est obligatoire.
• Il est essentiel pour l’accessibilité.
• Il aide Google à comprendre vos images.
• Il ne s’écrit pas n’importe comment : décrivez, soyez clair, pas robotique.
• Et non, ce n’est pas une "balise alt".

Pour aller plus loin (bientôt)

<img src="photo.jpg" alt="Femme qui tient une pancarte 'Bienvenue'">