Accessibilité dans le marketing par e-mail : 7 astuces simples pour rendre votre code plus accessible
Publié: 2019-04-16L'accessibilité devient rapidement un pilier du marketing par e-mail autant que de l'expérience utilisateur et de la conception. De plus en plus de marques s'assurent que leurs campagnes d'e-mails peuvent être appréciées par tous les abonnés, qu'ils souffrent de handicaps physiques, visuels ou cognitifs, ou même s'ils ne peuvent tout simplement pas voir les images dans leurs e-mails en raison d'un environnement d'entreprise.
En tant que spécialistes du marketing par e-mail, nous nous efforçons tous de fournir des e-mails de qualité dans les boîtes de réception de nos abonnés. Nous effectuons des tests de spam et des tests de messagerie pour nous assurer que notre conception s'affiche parfaitement sur tous les appareils et clients de messagerie. Mais parfois, nous oublions de définir des balises ALT pour nos images, utilisons une combinaison de couleurs difficile à lire ou n'optimisons pas nos e-mails pour les lecteurs d'écran, ce qui aliène certains de nos abonnés.
Si vous commencez tout juste à rendre votre code de messagerie plus accessible, les choses peuvent être écrasantes. Mais il existe quelques astuces simples que vous pouvez mettre en œuvre facilement et qui ont un impact important sur l'accessibilité des e-mails.
Voici comment vérifier votre e-mail pour son accessibilité à tous vos abonnés, section par section.
 | Votre e-mail est-il accessible ?Les contrôles d'accessibilité dans Litmus Checklist facilitent le test de votre e-mail par rapport aux meilleures pratiques d'accessibilité clés, identifient les domaines à améliorer et rendent vos e-mails plus accessibles à tous vos abonnés. En savoir plus → |
Votre liste de contrôle d'accessibilité
1. Ajoutez un code de langue à votre <HTML>
Tous vos abonnés ne liront pas votre courrier électronique sur leur ordinateur portable ou leur téléphone. Certains utiliseront des lecteurs d'écran pour accéder à votre courrier électronique. Étant donné que le contenu de votre e-mail sera lu à haute voix, il doit être dans la bonne langue pour que les prononciations soient correctes. Vous ne voudriez pas que votre e-mail écrit en français soit prononcé en anglais américain, n'est-ce pas ?
Pour éviter que cela ne se produise, vous devrez indiquer aux lecteurs d'écran dans quelle langue votre e-mail est écrit. Si aucun code de langue n'est spécifié dans vos e-mails, les lecteurs d'écran ne peuvent pas prononcer la copie correctement et votre e-mail éloquent peut sortir sonne complètement faux.
C'est pourquoi il est essentiel de vérifier votre <HTML> pour un code de langue - c'est un simple extrait de code qui spécifie la langue de votre e-mail. Si ce n'est pas déjà fait dans votre code, ajoutez lang="xx" — remplacez xx par le code de langue approprié pour votre e-mail. Une liste de tous les codes de langue et localités possibles, qui vous permet de tenir compte des différents accents, comme une différenciation entre l'anglais britannique et l'anglais américain, peut être trouvée ici .
Il y a quelques cas particuliers à considérer :
- Si vous utilisez du XML dans votre balise <HTML>, vous devrez également ajouter xml:lang="xx" .
- Si vous incluez le correctif Outlook 120dpi dans votre code de messagerie, vous aurez besoin de cette solution pour spécifier une langue. Voici à quoi ressemble notre code avec ce correctif :
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
Astuce de pro : il est possible de renseigner le code de langue de manière dynamique si vous avez configuré la localisation dans votre ESP.
2. Incluez toujours des balises ALT pour vos images
Il est important de garder à l'esprit que les images de vos e-mails peuvent ne pas toujours être visibles pour vos abonnés. Peut-être qu'ils ont perdu leurs images, qu'ils ont une mauvaise connexion ou qu'ils utilisent un lecteur d'écran, et si vous incluez beaucoup d'informations importantes dans vos images, ce message sera perdu. C'est là qu'intervient le texte ALT. Vous pouvez définir un texte visible par vos abonnés (ou lu par leur lecteur d'écran) afin qu'ils reçoivent toujours le même message que les personnes qui peuvent voir vos images.
Partout où vous avez une balise <IMG> dans votre code de messagerie, assurez-vous de définir la balise ALT. Si vous avez déjà rempli des balises ALT, vérifiez que le texte correspond au texte de l'image. Si vous avez des balises ALT vides, assurez-vous qu'il n'y a pas de texte sur l'image qui doit être rempli pour qu'un lecteur d'écran puisse le voir. S'il n'y a pas de balises ALT sur vos images et aucun texte dans l'image elle-même, ou aucun texte nécessaire à la signification de l'e-mail, assurez-vous d'ajouter une balise ALT vide : alt="" . Si vous ne l'incluez pas, les lecteurs d'écran liront l'URL de l'image et personne ne veut qu'une longue URL leur soit lue !
Une fois que vous avez défini toutes vos balises ALT (vides ou non) pour les images de votre e-mail, ajoutez un style de police dans la balise <IMG> pour le texte ALT stylisé . Ce style vous permet de personnaliser votre texte ALT et de modifier l'apparence de la police, de la couleur, de la taille, du style et de l'épaisseur.
3. Incluez l'attribut role="presentation" sur tous les éléments <TABLE>
La plupart des spécialistes du marketing par e-mail s'appuient sur des tableaux pour structurer la mise en page de leurs e-mails, mais ceux-ci peuvent poser de sérieux problèmes aux lecteurs d'écran. Si un lecteur d'écran identifie un tableau dans le code de votre e-mail, il sera lu à haute voix comme un. Il peut littéralement vous dire combien de lignes et de colonnes il y a, vous indiquant la position et le contenu de chaque colonne, ce qui rend impossible la compréhension de votre message.
C'est pourquoi il est essentiel d'indiquer au lecteur d'écran que vous utilisez le tableau uniquement à des fins de mise en page. Vous pouvez le faire en ajoutant role="presentation" à chaque tableau de votre e-mail. Ce rôle indique aux lecteurs d'écran de supprimer toute signification sémantique des tableaux. Ainsi, au lieu de lire les numéros de ligne et de colonne, il se concentre plutôt sur le contenu.
Regardons cet en-tête d'e-mail très simple à partir de l'un de nos propres e-mails :
Avant d'optimiser l'accessibilité, notre code ressemblait à ceci :
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Avez-vous remarqué qu'il manque des attributs ALT et que les tables ne sont pas définies sur role="présentation" ?
Ces petits oublis ont un grand impact sur l'accessibilité. Voici comment un lecteur d'écran interprète le code ci-dessus :
Lecteur d'écran : en-tête d'e-mail non accessible
Et voici ce même code qui a été remanié en ajoutant l' attribut ALT="" et role=" presentation" aux balises <TABLE> pour être convivial pour les lecteurs d'écran :
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Lecteur d'écran : en-tête d'e-mail accessible
Comme vous pouvez l'entendre, il y a toute une différence!
4. Utilisez des éléments sémantiques pour structurer votre contenu
Les éléments sémantiques facilitent la mise en évidence de la hiérarchie du contenu, montrant aux abonnés (et aux lecteurs d'écran) ce qu'est un titre et ce qu'est une copie de paragraphe. L'inclusion d'éléments sémantiques donne à vos abonnés qui utilisent des lecteurs d'écran la possibilité de « numériser » un e-mail plus facilement.
Lors de la double vérification de votre copie, assurez-vous que toute copie digne d'un titre est incluse dans une balise <H> : <H1> , <H2> , <H3> , et ainsi de suite. De même, assurez-vous que toute copie du corps est logée dans une balise <P> . Lorsque vous parcourez votre courrier électronique, les lecteurs d'écran mettent l'accent sur des en-têtes spécifiques et la configuration de ces balises <H> et <P> facilitera la navigation dans votre courrier électronique.
5. Alignez votre copie à gauche, si possible
En ce qui concerne votre corps de texte, il peut être tentant de l'aligner au centre. Cependant, quand il s'agit d'accessibilité, c'est un gros problème !
Lorsque vous centrez votre texte, le bord de départ change pour chaque ligne, ce qui oblige vos abonnés à travailler plus dur pour trouver le début de chaque ligne, et c'est un défi pour les personnes dyslexiques et autres troubles de la lecture. Si vous avez une copie de plus de deux lignes, alignez cette copie à gauche. Ceci est particulièrement important pour les mobiles, car la largeur étroite produit souvent plus de lignes de texte que vous ne le pensez. Vous devrez peut-être aligner votre texte à gauche de manière réactive sur mobile.
6. Vérifiez le contraste de votre copie
Vérifiez le rapport de contraste des couleurs de votre texte par rapport aux couleurs de fond de votre e-mail. Vous pouvez avoir des abonnés qui ont des déficits de couleur, et si vos couleurs ne leur offrent pas suffisamment de contraste, ils peuvent ne pas être en mesure de lire votre e-mail. Vous pouvez vérifier votre taux de contraste de deux manières :
- Si vous pouvez héberger votre HTML et produire une URL à utiliser, c'est ma façon préférée de vérifier mes couleurs : http://www.checkmycolours.com/
- Si vous devez saisir manuellement vos codes de couleur, consultez https://contrast-ratio.com/
7. Ajoutez des effets de survol pour les CTA, les liens et les images
Chez Litmus, nous utilisons des effets de survol sur nos CTA, liens et images pour indiquer la possibilité de cliquer. Les effets de survol sont un élément interactif simple qui peut rendre vos e-mails plus attrayants et améliorer l'expérience de vos abonnés. Bien que les effets de survol ne soient pris en charge que dans AOL, Apple Mail, Gmail et Yahoo! Mail, ils sont un effet populaire et méritent d'être implémentés dans votre code de messagerie. Vous pouvez estomper une image, changer la couleur de votre bouton CTA, ajouter un onglet contextuel, etc. 
Voir l'e-mail complet dans Litmus Builder →
Vous voulez plus de conseils par e-mail ?
 | Guide ultime de l'accessibilité des e-mailsCe guide contient les informations et les conseils étape par étape dont vous avez besoin pour rédiger, concevoir et coder des e-mails qui peuvent être appréciés par n'importe qui, quelles que soient ses capacités. Télécharger l'ebook → |
Obtenez les meilleurs conseils, statistiques et ressources sur le marketing et la conception par e-mail directement dans votre boîte de réception et restez à la pointe de l'innovation en matière d'e-mail lorsque vous vous inscrivez à Litmus News.
Restez informé →