Une balise alt n’existe pas. Alt est un attribut de la balise <img> : il contient le texte alternatif de l’image, affiché quand elle ne charge pas, lu à voix haute par les lecteurs d’écran et exploité par les moteurs de recherche pour comprendre le visuel. Syntaxe et règles d’écriture valent pour tous les supports. Les newsletters y ajoutent 2 difficultés : des images que certains clients de messagerie bloquent ainsi que des boutons en image qui disparaissent avec elles.
Syntaxe de l’attribut alt
L’attribut alt se place dans la balise <img>, à côté de src qui donne l’adresse du fichier :
<img src="logo-captain-verify.png" alt="Captain Verify" width="200" height="60">
Renseignez aussi width et height (ici 200 x 60 px) : ces dimensions réservent la place de l’image. Quand le client de messagerie bloque le fichier, le texte alternatif s’affiche dans cette zone. L’attribut title produit une infobulle au survol et ne remplace jamais alt.
Écrire un texte alternatif utile
Décrivez la fonction de l’image dans son contexte. Une même photo de téléphone appelle 2 alt différents selon qu’elle illustre un test produit ou qu’elle mène vers une fiche d’achat. Posez-vous la question : si l’image disparaissait, que faudrait-il lire à sa place ?
Visez une phrase courte. Abondance donne un repère de moins de 125 caractères dans son guide sur la balise alt. Cette limite vient de la pratique des éditeurs : le WCAG 2.2 n’en fixe aucune. Pour un bouton, Mailjet recommande environ 25 caractères sur 200 px de large, dans ses conseils sur l’alt text.
Supprimez les formules « image de » et « photo de » : les lecteurs d’écran annoncent déjà qu’il s’agit d’une image. Pour un logo, écrivez le nom de la marque. Pour un bouton « Télécharger le guide », l’alt « Télécharger le guide » suffit : « bouton bleu » n’apprend rien à l’abonné qui ne voit pas l’image. Relisez-le à voix haute.
Quel alt pour quel type d’image ?
Tout dépend du rôle de l’image dans le message : porter une information ou seulement décorer. L’arbre de décision du W3C distingue 5 cas, de l’image décorative à l’image complexe. Pour une newsletter, 4 questions dans cet ordre suffisent à trancher :
- L’image est-elle dans un lien ou un bouton ? L’alt décrit la destination ou l’action.
- L’image contient-elle du texte ? L’alt reprend ce texte mot pour mot, sauf s’il figure déjà juste à côté.
- L’image porte-t-elle une information (offre, produit, graphique) ? L’alt donne l’essentiel. Les données détaillées passent en texte dans l’email.
- L’image est-elle purement décorative ou redondante avec le texte voisin ? L’alt reste vide.
| Type d’image | Alt recommandé | Raison |
|---|---|---|
| Logo en en-tête | Captain Verify | Le nom identifie l’expéditeur |
| Bouton en image | Télécharger le guide | L’alt décrit l’action attendue |
| Bannière contenant du texte | Offre de rentrée : livraison gratuite dès 50 € d’achat | Le texte de l’image est repris intégralement |
| Graphique | Ouvertures en hausse de janvier à juin, détail dans le tableau ci-dessous | Le message clé dans l’alt et les chiffres en texte |
| Filet ou séparateur | alt= » » | Aucune information à transmettre |
Alt vide et images décoratives
Une image décorative reçoit alt="" : l’attribut est présent mais sans texte. Les technologies d’assistance l’ignorent. Omettre l’attribut produit l’effet inverse : certains lecteurs d’écran annoncent alors le nom du fichier, ce qui pollue la lecture.
Le W3C (WAI) retient l’alt vide quand l’image relève d’un simple effet visuel ou d’une redondance avec le texte voisin. Le W3C cite les espaceurs parmi les images décoratives. Dans un email, préférez un espacement en CSS (le padding d’une cellule de tableau) : il n’y a alors rien à ignorer.
Normes : WCAG 1.1.1 et RGAA 1.1 et 1.2
Le critère 1.1.1 « Contenu non textuel » du WCAG 2.2 est de niveau A, le plus basique : tout contenu non textuel a une alternative textuelle qui remplit une fonction équivalente. La pure décoration fait exception, à condition que les technologies d’assistance puissent l’ignorer. Le RGAA 4.1.2 de la DINUM reprend ce principe dans 2 critères du thème Images : le 1.1 « Chaque image porteuse d’information a-t-elle une alternative textuelle ? » et le 1.2 « Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ? ». La version 5 du référentiel est annoncée pour fin 2026.
Pour aller plus loin côté email, consultez notre article sur les techniques de codage d’emails accessibles et celui sur l’accessibilité des emails.
SEO et Google Images
Abondance range l’indexation des images parmi les raisons d’écrire un alt soigné et s’appuie sur Google Search Central, la spécification WHATWG et MDN. Aucune source consultée ne chiffre un gain de position attribuable à l’attribut : le bourrage de mots-clés n’apporte rien et dégrade la lecture au lecteur d’écran. Dans une newsletter, l’effet SEO est négligeable puisque le message n’est pas une page indexée, sauf si vous le publiez en version web. Sur un site, nommez aussi le fichier avec 2 à 4 mots séparés par des tirets, par exemple logo-captain-verify.png, conformément aux conseils d’Abondance.
Erreurs fréquentes
- Omettre l’attribut sur une image décorative au lieu d’écrire
alt="". - Commencer par « image de » ou « photo de ».
- Aligner des mots-clés (keyword stuffing) au lieu de décrire la fonction de l’image.
- Copier le même alt sur toutes les images d’un email.
- Laisser le texte important uniquement dans l’image, sans équivalent en HTML.
- Écrire un alt plus long que la zone de l’image : en cas de blocage, il peut se couper.
Balise alt en newsletter : images bloquées
Un site web affiche presque toujours ses images. Un email dépend du client de messagerie de chaque abonné. C’est là que l’alt devient un filet de sécurité.
Dans son guide sur le blocage des images (publié en 2017, mis à jour le 17 août 2021), Litmus désigne les clients Outlook desktop comme les principaux bloqueurs. La plupart des autres clients affichent les images par défaut, AOL faisant exception. Les clients mobiles testés par Litmus les affichent aussi : l’abonné doit fouiller les réglages pour les couper. Le blocage concerne donc surtout les postes de bureau sous Outlook. Microsoft configure Outlook par défaut pour bloquer le téléchargement automatique des images. Gmail les charge automatiquement d’après l’aide Google (option Toujours afficher les images externes), sauf si le message ou l’expéditeur paraît suspect ou si l’utilisateur a demandé une confirmation au préalable.
Le poids de ces abonnés dépend de votre cible. Litmus cite Email Client Market Share : Outlook arrive au 4e rang des clients de messagerie avec 6 % des ouvertures. Litmus ajoute que ce chiffre est peut-être sous-estimé, puisqu’Outlook bloque par défaut le pixel de suivi et que ces ouvertures ne sont alors pas comptées. Une base B2B a de bonnes chances d’en compter davantage, selon Litmus.
La capture montre le défaut type : à gauche, seule l’image d’en-tête affiche un texte alternatif, minuscule. Les visuels des blocs en dessous restent vides. Litmus précise que dans Outlook desktop l’alt n’apparaît qu’après le bandeau d’avertissement et seulement si les images sont désactivées. Une image cassée n’affiche rien.
Alt stylé : quels clients l’affichent ?
Gmail, Outlook.com et Apple Mail rendent l’alt stylé, Outlook desktop 2007-2019 ne le rend pas. Yahoo! Mail en webmail n’affiche aucun alt, d’après le tableau de Litmus (mis à jour en 2021). On met en forme l’alt avec un style inline sur la balise <img>, par exemple la couleur et la taille du texte.
<img src="bouton.png" alt="Télécharger le guide" width="200" height="50" style="color:#0b5cad; font-size:16px; font-family:Arial, sans-serif;">
| Client | Alt stylé | À savoir |
|---|---|---|
| Gmail | Oui | Images affichées par défaut (aide Gmail) |
| Outlook.com | Oui | Webmail, distinct d’Outlook desktop |
| Apple Mail | Oui | Testé par Litmus |
| Outlook pour Mac | Oui | Distinct d’Outlook pour Windows |
| Outlook desktop 2007-2019 | Non | Alt simple, seulement images désactivées |
| Yahoo! Mail (webmail) | Non | Aucun alt affiché selon Litmus |
Litmus précise que le blocage par défaut d’Outlook desktop date de ses tests sur Outlook 2016, sans revérification depuis. Rouvrez un test de rendu avant de bâtir un email sur ce tableau.
Bouton bulletproof plutôt que CTA en image
Un bouton bulletproof est un bouton construit en HTML et CSS : une cellule de tableau colorée contenant un lien en texte vrai. Il reste visible et actionnable images désactivées, là où un bouton en image disparaît ou se réduit à son alt. Outlook desktop rend le HTML avec le moteur de Word depuis Outlook 2007, comme l’indique la documentation de Microsoft. Pour ces versions, certains gabarits de bouton ajoutent un fragment VML (Vector Markup Language), non détaillé ici.
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#0b5cad" style="border-radius:4px;">
<a href="https://exemple.com/guide" style="display:inline-block; padding:12px 24px; color:#ffffff; font-family:Arial, sans-serif; text-decoration:none;">Télécharger le guide</a>
</td></tr></table>Le code ci-dessus donne un bouton de 12 px de remplissage vertical et 24 px horizontal, en #0b5cad avec un texte blanc #ffffff. Le même principe vaut pour tout texte important (titre, offre, date, lien de désinscription) : en HTML, pas dans une image. Un lien d’action comme le bouton « ajouter au calendrier » doit rester lisible sans image. Un email tout en image s’affiche presque vide dans Outlook desktop tant que l’abonné ne télécharge rien. Litmus recommande de garder texte et boutons en HTML : le bon test reste la lisibilité sans image.
Gardez aussi une version texte brut cohérente et surveillez le poids des images, qui pèse sur l’affichage des abonnés en connexion lente.
Tester avec les images désactivées
Dans Gmail, ouvrez Paramètres > Afficher tous les paramètres, descendez jusqu’à la section Images et cochez Demander confirmation avant d’afficher des images externes. Cliquez sur Enregistrer les modifications en bas de page, puis rouvrez votre envoi. Sous Outlook desktop, le blocage est actif par défaut. Sinon, ouvrez Fichier > Options > Centre de gestion de la confidentialité, puis Paramètres du Centre de gestion de la confidentialité. Cochez ensuite « Ne pas télécharger automatiquement les images dans les messages électroniques HTML ou les éléments RSS ». Complétez avec un outil de prévisualisation d’emails.
Contrôlez que le bouton principal reste lisible et que chaque alt a du sens seul. Un texte alternatif soigné ne sauve pas un email qui rebondit : passez aussi la liste par une vérification d’adresses avant l’envoi pour repérer les adresses invalides.
