Textes alternatifs des images dans les e-mails événementiels : guide de rédaction et de vérification
Un e-mail événementiel peut contenir une affiche, un portrait d’intervenant, un logo de partenaire ou un bouton graphique. Certaines personnes ne verront pas ces images : elles utilisent un lecteur d’écran, bloquent les images ou ouvrent un autre client de messagerie. Le texte alternatif transmet le rôle d’une image, mais ne remplace pas des informations essentielles enfermées dans un visuel. Examinez ensemble le message, l’image et sa destination.
La rédaction de Boletolibre
Publié
Commencez par le message, pas par l’image
Lisez l’e-mail avec toutes les images masquées. Peut-on identifier l’événement, comprendre pourquoi le message arrive, trouver la date et le lieu actuels et accéder à l’étape suivante ? Sinon, corrigez d’abord le texte et les liens. Le texte alternatif remplace une image précise ; il n’est pas une seconde version de l’e-mail. Une même photo peut demander une autre formulation dans une annonce initiale et dans la présentation d’une intervenante.[1]
Regardez le titre et la légende voisins avant de rédiger. S’ils donnent déjà la même information, la répétition ajoute du bruit. Notez le rôle de l’image en une phrase, puis demandez-vous ce qui manquerait sans elle. Les recommandations du W3C fondent l’alternative sur le rôle de l’image dans son contexte.
Attribuez un rôle à chaque image
Classez les images selon leur rôle. Une image informative apporte un fait ou une identification absente du texte proche. Une image fonctionnelle est elle-même un lien ou une commande. Une image décorative crée une ambiance ou une mise en page sans information nécessaire. Une image complexe, telle qu’un plan ou une grille de programme, peut exiger une désignation brève et un équivalent dans le texte ou sur une page de destination tenue à jour.[1][3]
Il n’est pas nécessaire d’inventorier chaque détail d’une photographie. Une scène à côté du titre complet peut être décorative ; le portrait d’une nouvelle intervenante est informatif. Décidez d’après cet e-mail, pas d’après le nom du fichier. Faites vérifier les faits suggérés par le visuel par une personne connaissant le programme approuvé.
Écrivez pour la décision du lecteur
Pour une image informative, dites ce qui aide à prendre la décision suivante. « L’intervenante Ana Silva au pupitre » peut suffire si son nom et son rôle figurent déjà dans le texte. Si une photo montre une entrée précise, ne décrivez sa fonction qu’après confirmation du lieu. Pour un logo de partenaire, utilisez le nom approuvé de l’organisation quand son identification importe.[1]
- Affiche : gardez date et lieu dans le corps ; réservez une courte alternative à ce qui reste informatif.
- Portrait : nommez la personne ou la biographie liée si tel est le rôle du visuel.
- Logo : utilisez le nom approuvé du partenaire si sa reconnaissance compte ; sinon, évaluez son rôle décoratif.
- Bouton graphique : nommez l’action et la destination, puis vérifiez le lien.
Évitez « image de » sauf si le support lui-même compte. N’inventez ni noms, ni pronoms, ni dates, ni itinéraires, ni capacités. Ne recopiez pas toute l’affiche dans un attribut alt interminable. Placez les éléments importants dans du texte sélectionnable et donnez à l’affiche une alternative courte adaptée à ce qui reste de son rôle.
Distinguez les liens illustrés du décor
Un bouton constitué uniquement d’une image a besoin d’une alternative indiquant l’action ou la destination, par exemple « Voir les options de billets pour [Événement] ». Un ornement peut avoir un attribut vide, alt="", afin que les technologies d’assistance l’ignorent. Une image liée n’est pas forcément décorative : si elle est le seul accès à une destination, son but doit être compréhensible. Le W3C distingue ainsi images fonctionnelles et décoratives.[1][2]
Vérifiez le lien lui-même, au-delà des mots. Si un portrait mène à une biographie, l’alternative peut nommer cette action ; si la biographie suit déjà dans un lien textuel, une autre alternative ou une alternative vide peut convenir. Évitez que des liens voisins annoncent sans intérêt la même action deux fois.
Gardez les détails essentiels en texte
Placez dans le texte normal la date, le fuseau horaire, le lieu ou l’accès en ligne, le choix de billet, les conditions tarifaires et les changements qui influent sur la participation lorsqu’ils sont pertinents. Une capture d’affiche peut aider visuellement, mais les images peuvent manquer et un long texte alternatif se parcourt mal. Pour un programme illustré, donnez un titre court et un programme lisible dans le message ou à une adresse actuelle clairement nommée.[3]
Mettez à la disposition de l’éditeur une source approuvée des faits de l’événement. Avant l’envoi, comparez-y le texte visible, les alternatives et la page liée. Si le plan change, mettez les trois à jour. Une correction ou une consigne d’accès ne doit jamais figurer uniquement dans le texte alternatif.
Localisez et vérifiez les faits
Traduisez l’alternative pour le public de chaque version. Conservez les noms officiels d’événement, de lieu, d’intervenants et de partenaires selon la version approuvée ; traduisez naturellement l’action et l’explication. Ne laissez pas sans contrôle une traduction automatique des indications ou des noms. Un ordre différent des mots peut mieux exprimer la même fonction.
Pour chaque langue, comparez l’alternative au titre, au bouton et à la destination localisés. Si l’alt annonce « s’inscrire » alors que la page ne propose qu’une liste d’attente, l’action est trompeuse. Si l’image contient du texte intégré, la revue doit décider de remplacer le visuel ou de présenter aussi ces mots en texte normal.
Testez l’e-mail reçu
Envoyez un véritable message test par le service choisi et examinez-le dans les clients que votre équipe peut raisonnablement tester. Bloquez les images ; utilisez un lecteur d’écran ou l’arbre d’accessibilité si possible ; suivez chaque lien d’image. Certains clients n’affichent qu’une partie de l’alternative ou la suppriment dans certains agencements. Ne vous fiez ni à une limite universelle de caractères ni à la seule prévisualisation. Mailchimp décrit cette variation pour ses campagnes.[4]
Vérifiez l’affichage sur écran étroit et lors d’un transfert ou d’une citation si ce parcours est courant. Confirmez qu’une alternative vide reste silencieuse, qu’une image liée annonce une action et que les faits restent lisibles. Notez le client et le résultat, sans prétendre qu’un essai certifie toutes les boîtes de réception.
Utilisez un registre par image
Utilisez une ligne par image et par langue. Relevez la référence, le rôle, le texte voisin, la source factuelle approuvée, la destination du lien, le texte proposé et la décision du réviseur. Indiquez ce qui se passe sans images et qui corrige les problèmes ouverts. La décision éditoriale reste ainsi visible si le graphisme change tardivement.
Le registre modifiable contient des exemples et un champ pour les exceptions qui bloquent l’envoi. Copiez-le pour la campagne ; ce modèle est en anglais et le guide existe en six langues. Ne placez pas de données d’abonnés ni d’autres renseignements personnels dans ce registre de contenu.
Télécharger le registre de revue des textes alternatifs (Markdown, en anglais)
Sources et lectures complémentaires
- Tutoriel sur les imagesW3C WAI · Consulté
- Images décorativesW3C WAI · Consulté
- Comprendre le critère 1.1.1 : contenu non textuelW3C WAI · Consulté
- Ajouter du texte alternatif aux imagesMailchimp · Consulté