Le guide ultime des e-mails accessibles

En tant que spécialistes du marketing par e-mail, nous nous efforçons d'offrir une expérience de messagerie parfaite à nos abonnés. Nous nous assurons que nos e-mails sont envoyés au bon moment en fonction de nos analyses et qu'ils sont livrés dans la boîte de réception en surveillant notre délivrabilité et en exécutant des tests de spam. Nous personnalisons notre contenu pour qu'il soit plus pertinent et modifions notre conception pour nous assurer que nos e-mails s'affichent parfaitement sur d'innombrables appareils et dans chaque client de messagerie.

Ce sont toutes des étapes recommandées pour garantir que vos e-mails mènent à une conversion. Cependant, vos e-mails pourraient être manqués par une partie importante de vos abonnés, des personnes souffrant de handicaps visuels, physiques ou cognitifs et neurologiques.

Il suffit de quelques petites étapes pour rendre vos e-mails plus accessibles à tous vos abonnés. Dans cet article, nous discuterons de ces étapes et de la manière dont elles peuvent améliorer le courrier électronique pour tout le monde.

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 →

Qu'est-ce que l'accessibilité ?

L'accessibilité est l'un des piliers fondateurs de l'expérience utilisateur et de la conception. Pour le courrier électronique, cela signifie s'assurer que tout le monde peut recevoir et comprendre votre message, quels que soient les handicaps ou les appareils fonctionnels qu'ils utilisent.

Vous pouvez considérer l'accessibilité dans les e-mails comme une extension du traitement des clients de messagerie avec un support médiocre. L'inclusion de solutions de contournement et de solutions de secours garantit que chaque abonné bénéficie d'une expérience positive.

En tant que développeurs d'e-mails, nous passons des heures à faire en sorte qu'un e-mail ait l'air parfait chez un client avec moins de 1% de part de marché, mais très peu d'entre nous passeront quelques minutes à rendre l'e-mail accessible.
– Mark Robbins, Rebelmail

Accessibilité dans la conception d'e-mails

Commençons par examiner les aspects visuels de votre e-mail qui peuvent avoir un impact sur l'accessibilité et où des améliorations peuvent être apportées.

Utilisez la couleur intelligemment

Les abonnés daltoniens peuvent ne pas être en mesure de faire la différence entre certaines couleurs de votre e-mail, alors assurez-vous que la couleur n'est pas le seul moyen de transmettre les informations.

Le contraste des couleurs peut également poser des problèmes aux abonnés ayant des difficultés visuelles. Utilisez un contraste de couleurs élevé entre les différents éléments de votre e-mail, en particulier entre les couleurs de la copie et de l'arrière-plan. Une façon de procéder consiste à utiliser le vérificateur de contraste des couleurs de WebAim pour vérifier le rapport de contraste des couleurs de votre courrier électronique.

Vos e-mails sont-ils accessibles ? Découvrez à quoi ressemblent vos e-mails pour les utilisateurs malvoyants à l'aide du filtre de daltonisme dans les aperçus d'e-mails Litmus. Essayez Litmus gratuitement →

Ne créez pas de contenu nuisible

Le contenu qui clignote à certains rythmes ou selon des motifs, tels que des GIF animés, peut provoquer des crises photosensibles chez certaines personnes. Évitez de flasher du contenu ou d'inclure des liens vers des vidéos pouvant avoir un contenu similaire.

Équilibrer le texte et les images

Alors que les utilisateurs voyants peuvent numériser visuellement ou ignorer le contenu non pertinent, les utilisateurs aveugles doivent écouter l'intégralité du contenu de l'e-mail, un e-mail à la fois. Adaptez le contenu écrit de votre e-mail pour transmettre le message principal. Tenez également compte de la compatibilité de votre conception avec les lecteurs d'écran populaires tels que JAWS ou Window-Eyes.

Améliorez la lisibilité de votre e-mail

Utiliser des tailles de police plus grandes

Tout ce qui est inférieur à 14 pixels sur un écran de bureau ou d'ordinateur portable nécessite un certain effort de lecture. Les utilisateurs peuvent augmenter le niveau de zoom sur leurs appareils pour les aider à lire leurs écrans, mais cela peut avoir un impact négatif sur votre e-mail, qui peut sembler cassé ou coupé.

Le texte peut apparaître plus petit sur les appareils mobiles, obligeant les utilisateurs à travailler plus dur pour lire votre e-mail. Utilisez les requêtes multimédias pour augmenter la taille de police minimale de 14 à 16 pixels sur les appareils plus petits afin d'aider les utilisateurs à lire vos e-mails :

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Donnez à votre copie un espace pour respirer

Pour certains, il peut être difficile de lire des paragraphes et des blocs de texte où les lignes de copie sont rapprochées. Définissez une hauteur de ligne appropriée sur le texte pour le rendre plus facile à lire pour tous. Nous vous recommandons de choisir une hauteur de ligne supérieure de 4 pixels à la taille de votre police.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Astuce : lorsque vous augmentez la taille de la police pour les appareils mobiles, n'oubliez pas d'augmenter également la hauteur de la ligne.

Les paragraphes de la copie ont également besoin d'espace pour respirer pour faciliter la lisibilité. Lors de la numérisation d'un e-mail, il devrait être facile d'identifier les paragraphes et de pouvoir garder votre place. Créez suffisamment d'espace blanc au-dessus et en dessous des paragraphes.

Une étape supplémentaire pour faciliter la lecture du texte consiste à l'éloigner des bords de vos e-mails. L'ajout d'un remplissage à une cellule de tableau ou à une balise de paragraphe vous aidera à y parvenir.

Évitez la copie justifiée dans votre e-mail

Une copie « justifiée » signifie que l'espacement des lettres et des mots est ajusté de sorte que le texte affleure à la fois les marges gauche et droite. Bien que courant sur papier, l'espacement des mots incohérent peut rendre la copie justifiée difficile à lire. Il a été prouvé que le texte aligné à gauche est plus facile à lire pour tous.

Choisissez la bonne police de caractères

L'utilisation de polices Web a augmenté le nombre de polices de caractères possibles pouvant être utilisées dans les e-mails, mais avant de décider d'utiliser Lobster comme police de corps, réfléchissez à son accessibilité. Lorsque vous sélectionnez la police de caractères de votre e-mail, choisissez-en une qui est régulièrement espacée et pas trop condensée. C'est une bonne idée non seulement pour l'accessibilité, mais aussi pour les utilisateurs mobiles.

Utiliser des éléments sémantiques

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 par en-tête. Vous pouvez le faire en utilisant les balises <p> et <h>. Ceux-ci sont pris en charge dans chaque client, c'est donc un bon endroit pour commencer à rendre votre e-mail plus accessible.

Historiquement, le style des balises <p> et <h> n'a pas été facile, c'est pourquoi il est encore assez rare de voir ces balises utilisées dans les e-mails. Les marges autour du texte enveloppé dans l'une ou l'autre de ces balises étaient difficiles à gérer, mais en utilisant un code comme celui-ci, vous pourrez contrôler cet espace :

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Astuce : en utilisant mso-line-height-rule:exactly; dans vos balises <h> maintiendra la règle de hauteur de ligne que vous avez définie dans les clients de messagerie Microsoft Outlook.

Regardez ce clip de Litmus Live 2017 alors que le développeur de messagerie Paul Airy explique pourquoi et comment il utilise des éléments HTML sémantiques dans ses e-mails pour les rendre plus accessibles :

Tweeter cette vidéo →

Apprenez des experts de Litmus Live Devenez un meilleur spécialiste du marketing par e-mail avec des conseils concrets, des bonnes pratiques et des conseils pratiques lorsque vous nous rejoignez pour la conférence Litmus Live. En savoir plus →

Écrire une copie lisible

Créer un e-mail plus accessible et lisible ne dépend pas seulement de la façon dont l'e-mail est codé, mais aussi de la façon dont la copie est écrite. Rendre votre copie de courrier électronique plus humaine contribuera à sa lisibilité et aidera à établir une communication 1:1 entre vous et vos abonnés.

Le test le plus populaire, connu sous le nom de test de facilité de lecture Flesch-Kincaid, se trouve dans Microsoft Word et calcule la facilité de lecture de votre contenu sur une échelle de 0 à 100. Cela signifie:

• Un score de 90-100 sera facilement compris par un élève de 11 ans
• Un score de 60-70 sera facilement compris par les élèves de 13 à 15 ans
• Un score de 30-50 sera compris par les étudiants
• Un score de 0 à 30 sera mieux compris par les diplômés universitaires

Rendre quelque chose de plus « lisible » ne devrait pas signifier que vous craignez les sujets délicats ou les sujets importants. Plutôt que de dénigrer votre écriture, cela fait référence à l'accessibilité du texte. Votre sweet spot se situe entre 60 et 70 pour capter un public général. Bien sûr, si votre public est très instruit, n'ayez pas peur d'utiliser un langage plus complexe.

Vous pouvez également améliorer la lisibilité en modifiant votre copie pour qu'elle soit directe et précise.

Créer du contenu accessible

Rendre les liens cliquables/touchables

S'assurer que la taille de vos boutons pare-balles est suffisamment grande pour être utilisée par les pouces et les doigts sur les appareils mobiles contribuera également à l'accessibilité de votre courrier électronique. Un bouton plus gros sera bénéfique à ceux qui ne peuvent pas contrôler une souris avec précision.

J'aime les gros boutons et je ne sais pas mentir.
– Justine Jordan, Litmus

Alors que les directives d'interface utilisateur pour iPhone d'Apple recommandent une largeur et une hauteur minimales de 44 pixels pour les boutons, ce nombre varie en fonction du fournisseur de l'appareil mobile. Une autre règle empirique consisterait à utiliser une largeur et une hauteur minimales de 72 pixels, car il s'agit de la largeur moyenne en pixels d'un pouce.

Bannissez la copie du lien « Cliquez ici »

Évitez d'utiliser « cliquez ici » comme copie pour vos liens. Les utilisateurs de lecteurs d'écran parcourent souvent le contenu, le sautant comme un moyen de numériser un e-mail. Le contexte de vos liens aidera ces utilisateurs à décider s'ils veulent cliquer ou non.

Par exemple, si vous avez un lien qui mène à une liste de produits de chaussures, l'utilisation d'une copie de lien telle que « Voir plus de chaussures » atténue l'ambiguïté du lien pour les utilisateurs de lecteurs d'écran. Réduire l'ambiguïté des liens est bénéfique pour tous les abonnés, car cela ne les oblige pas à lire le contexte entourant le lien, ce qui est bien pour ceux qui scannent régulièrement les e-mails sans tout comprendre.

Ce n'est pas seulement pour l'accessibilité, bannir les liens « cliquez ici » déplacera le contenu de votre e-mail pour qu'il soit plus indépendant de l'appareil. Alors que « cliquez ici » peut avoir du sens pour un abonné utilisant un ordinateur portable ou un ordinateur de bureau, mais pas pour quelqu'un qui utilise un appareil mobile ou une tablette où le tapotement est l'action requise.

Utiliser correctement l'attribut ALT

L'attribut ALT est une bonne pratique de messagerie depuis l'aube des e-mails HTML, car les clients de messagerie bloquent les images par défaut. Le texte utilisé dans un attribut ALT attaché à une image s'affiche lorsque l'image ne se charge pas. Cela aide l'abonné à « voir » l'e-mail s'il a des images désactivées par défaut dans son client de messagerie ou s'il utilise un lecteur d'écran pour lire l'e-mail.

Pour utiliser correctement l'attribut ALT, le contexte de l'image doit être parfaitement compris par rapport au contenu qui l'entoure. Tout d'abord, vous devez décider si l'image est fonctionnelle, illustrative ou décorative.

Toutes les images nécessitent des attributs ALT, donc un attribut ALT nul doit être utilisé pour les images qui n'ont pas besoin d'être lues par des lecteurs d'écran ou qui représentent quelque chose de vital pour l'abonné.

Affichez votre courrier électronique avec toutes les images désactivées pour vous aider à décider quelles images nécessitent l'attribut ALT et lesquelles peuvent avoir un attribut null.

Pour mieux comprendre comment le contexte influence l'utilisation de l'attribut ALT pour vos images, visitez la page WebAim sur l'attribut ALT.

Utilisez role="présentation" sur toutes vos tables de présentation

Dans la conception d'e-mails, les tableaux sont utilisés pour contenir le contenu ainsi que pour structurer la conception de l'e-mail. Les tableaux n'ont jamais été destinés à être utilisés pour la conception ; cependant, en raison de restrictions dans les clients de messagerie tels qu'Outlook, les concepteurs de messagerie ont été contraints d'utiliser l'élément <table> comme élément de conception.

Pour aider les lecteurs d'écran à comprendre la différence entre les éléments <table> qui contiennent du contenu et ceux qui sont purement destinés à la conception, utilisez add role="presentation" sur chaque table qui contient le contenu que l'abonné doit lire. Vous n'avez qu'à l'ajouter à chaque élément <table>, pas à chaque <td>. Cela évite de forcer un lecteur d'écran à lire chaque cellule de vos tableaux une par une et aide l'abonné à accéder directement au contenu important.

En plus de role="presentation", aria-hidden="true" est un autre attribut HTML qui peut être ajouté aux éléments de votre HTML qui sont destinés au contenu visuel et doivent être masqués pour les lecteurs d'écran :

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="présentation" peut également être utilisé sur les images. Le développeur de messagerie Remi Parmienter a découvert un comportement inhabituel dans Chrome pour les utilisateurs de VoiceOver, une application de lecture d'écran pour MacOS. VoiceOver a commencé à lire les noms de fichiers pour les images, même si l'attribut ALT est présent mais vide. Il est recommandé d'utiliser l'attribut HTML role="presentation" sur toute image avec un attribut ALT vide pour éviter que le nom de l'image soit lu.

Courriels accessibles en action

Nous pouvons mettre en œuvre un niveau d'accessibilité si nous regardons au-delà des défis. Concentrez-vous sur ce que vous pouvez faire, pas sur ce que vous ne pouvez pas faire.
– Paul Airy, Au-delà de l'enveloppe

Les membres de la communauté Litmus ont participé à un concours communautaire pour créer un e-mail accessible. Les soumissions ont illustré les petites mesures qui peuvent être prises pour ouvrir le courrier électronique à un nouveau public.

Les abonnés à cet e-mail pourront augmenter la taille du texte via leur navigateur jusqu'à 200% sans casser la conception de l'e-mail. Et il comporte un GIF animé qui s'arrête après trois cycles (dans les cinq secondes) pour ceux qui souffrent de crises photosensibles.

Eyal Bitton a créé un e-mail qui utilise une copie pour les liens qui ont un sens hors contexte, et Eyal signale la fin de l'e-mail aux abonnés aveugles en utilisant du texte caché.

La newsletter de Type E utilise une amélioration progressive interactive pour permettre à l'abonné de choisir entre une taille de texte standard ou large. Le développeur d'e-mails Paul Airy a également inclus une option - pilotée par un opt-in - où l'abonné peut choisir d'afficher l'e-mail avec des arrière-plans teintés s'il souffre de certains handicaps.

Ces e-mails montrent qu'il suffit de quelques petites étapes pour que les e-mails soient plus accessibles et atteignent potentiellement un public plus large. Bon nombre de ces étapes facilitent non seulement l'accessibilité, mais contribuent également à améliorer vos e-mails pour tout le monde.

APERÇU DE VOS E-MAILS AVEC DES IMAGES ACTIVÉES ET DÉSACTIVÉES

Vous voulez voir à quoi ressemblent vos e-mails dans plus de 60 clients de bureau, mobiles et de messagerie Web, y compris les vues sans images ? Essayez Litmus, gratuitement !

Commencez à tester maintenant →

Guide ultime de l'accessibilité des e-mails Ce 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 →