Consignes d'accessibilité des e-mails : normes et meilleures pratiques

Regardez autour de vous, écoutez ce qui se passe. Voyez-vous tout clair, en mode couleur ? Et vous entendez bien les bruits et les voix ? Félicitations, vous êtes certainement une personne chanceuse. De plus, tu es vraiment quelqu'un de très heureux. Vous avez la vision et l'ouïe !

Vous pensez peut-être que ces capacités sont communes et données par défaut à tout le monde ? Et si je vous disais que 4,5 % des destinataires de votre liste de contacts souffrent de daltonisme, il leur est donc difficile de lire ou de comprendre le contenu de vos e-mails ?

Bien que le daltonisme ne soit pas le seul trouble répandu. Juste un simple fait : 285 millions de personnes dans le monde souffrent de déficiences visuelles graves qui rendent la vision difficile même avec des lentilles de contact ou des lunettes.

Et 5% de la population de la Terre ont des déficiences auditives. En d'autres termes, plus de 360 ​​millions.

C'est quelque chose à penser. Nous ne pouvons pas ignorer toutes ces personnes. Nous devons faire de notre mieux pour être amicaux avec eux et améliorer leur vie. C'est ça l'accessibilité.

Maintenant, préparez-vous une tasse de thé ou de café et plongeons dans les détails.

Que signifie l'accessibilité des e-mails ?

Il y a des gens qui souffrent de troubles visuels graves ou même de cécité complète. Ils utilisent un logiciel de lecture d'écran pour vocaliser les e-mails de la boîte de réception - VoiceOver, Microsoft Narrator et d'autres outils similaires. Notre devoir est donc d'adapter notre contenu à ces assistants.

En ce qui concerne le daltonisme, de la protanopie (lorsque les gens ne peuvent pas distinguer certaines couleurs) à la monochromatie, il n'existe aucun outil qui aide les personnes atteintes de ces conditions. Nous devons donc optimiser nous-mêmes l'imagerie des e-mails.

D'autres souffrent de déficience auditive, de dyslexie, etc. Par conséquent, il existe des règles d'accessibilité pour chaque type de trouble. Ainsi nous sommes arrivés à la réponse à une question dans le titre.

En un mot, cela signifie s'en tenir à des normes qui rendent les e-mails lisibles pour les personnes ayant tous types d'exigences particulières. Heureusement, les constructeurs de modèles de courrier électronique HTML modernes et d'autres logiciels de marketing nous fournissent des outils avancés pour mettre en œuvre ces normes assez facilement et sans compétences particulières.

Je vais partager ces normes ci-dessous, ainsi que certaines pratiques qui seront utiles pour créer des e-mails accessibles.

Normes d'accessibilité

Alors, chers amis, il est temps d'explorer un à un ces ensembles de recommandations à suivre pour envoyer des emails "universels" qui seront faciles à lire pour les destinataires avec tous les types de dysfonctionnements visuels, auditifs et perceptifs.

1. Daltonisme

Il existe une liste de types de daltonisme. Les voici:

La protanopie signifie la perception défunte de la couleur rouge. Les lecteurs atteints de protanopie, c'est-à-dire les aveugles rouges, ont tendance à confondre la couleur noire avec toutes les nuances de rouge. Ils ne peuvent pas non plus distinguer le brun foncé du vert foncé et ne voient aucune différence entre la couleur bleue et le diapason moyen de rouge. Jetez un œil à cet e-mail d'Uber :

Et voici comment les receveurs atteints de protanopie le voient :

La deutéranopie est une perception réduite du vert. Ces personnes ont également tendance à confondre le diapason rouge/vert moyen, le vert vif/jaune et le bleu clair/lilas. Encore une fois, jetez un œil au même e-mail : original à gauche et version de deutéranopie à droite.

Tritanopie signifie cécité à la couleur bleue et à ses nuances. C'est pourquoi ceux qui souffrent de cette déficience confondent généralement bleu clair/gris et violet foncé/noir. Le même exemple d'e-mail, mais vous pouvez en voir la perception tritanopie à droite :

La monochromatie correspond au daltonisme total. Ces personnes ne peuvent voir la réalité peinte qu'en noir, blanc et différentes nuances de gris. Pas d'autres couleurs. Imaginez le monde sur l'écran d'un très vieux téléviseur. Voici à quoi ressemble la monochromie. Sérieusement, ça me donne la chair de poule.

Que devrions nous faire?

• Choisissez la taille de la police pour la copie de l'e-mail d'au moins 14 px. Cependant, je recommande 16px pour fournir aux destinataires une conception d'e-mail accessible ;
• Évitez les solutions de contraste basées sur des couleurs que les clients daltoniens peuvent ne pas distinguer. Par exemple, n'écrivez pas votre copie avec du texte vert ou bleu sur un fond rouge ou lilas. Regardez le message ci-dessous. C'est OK pour les personnes ayant une perception complète du diapason des couleurs… mais est-ce aussi bon dans le cas d'une protanopie ou d'une vision monochromatique ? Je ne pense pas…

(message d'origine)

(c'est ainsi que les clients atteints de protanopie le verront)

(la façon dont les monochromes voient ce message)

Comment doivent-ils savoir si leur équipe favorite a gagné ou perdu le match ?

• Oubliez l'idée d'ajouter des boutons verts sur des images rouges, ou vice versa. Il en va de même pour toutes les combinaisons de couleurs "risquées" mentionnées ci-dessus. L'idée est vraiment mauvaise - les personnes souffrant de dysfonctionnements de la perception des couleurs peuvent ne pas remarquer du tout le bouton ;
• Spécifiez toujours la couleur du produit entre parenthèses - les clients peuvent ne pas distinguer, par exemple, la couleur rouge, mais ils savent que les chemises ou robes rouges correspondent parfaitement à leur image ;
• Faites des liens dans vos e-mails en gras.

Oui, la couleur bleue normale pour le texte des liens n'est pas suffisante. Et pas seulement à cause des destinataires daltoniens. Avez-vous déjà lu des e-mails dans la rue lorsque le soleil brille sans pitié sur l'écran du smartphone ? Alors vous savez ce que je veux dire - il est difficile de distinguer les couleurs du tout. Mettez donc les liens en gras et ne les soulignez pas. Pourquoi? Parce que le soulignement peut distraire les personnes dyslexiques. Nous parlerons de la dyslexie en détail un peu plus tard.

Dans cet e-mail, les éléments de menu sont également en gras. Cette idée simple optimise la navigation des clients dans la newsletter, ils trouveront facilement la catégorie d'appartements souhaitée.

Remarquez le lien "Afficher les détails" avec une flèche. Il dit que vous pouvez voir plus de détails en cliquant dessus;

Si vous ajoutez des éléments d'interactivité ou effectuez des tests dans votre campagne, choisissez des couleurs vert/rouge foncé/bleu clair pour mettre en évidence les bonnes réponses. Et rouge/noir/gris respectivement pour tort respectivement. Assurez-vous de dupliquer les réponses oui/non avec le texte.

Il est vraiment essentiel de vérifier si l'e-mail correspond aux exigences des personnes qui souffrent d'un manque de couleur. Pour votre commodité, j'aimerais ajouter ce tableau à notre article. Enregistrez-le pour trouver les couleurs correspondantes et éviter toute confusion :

Il existe également un outil gratuit de simulation de daltonisme qui montre vos photos de la manière dont les destinataires daltoniens les percevront.

Comme nous pouvons le constater, les tests de couleur ne sont pas trop complexes, mais ne l'ignorez pas. Montrez votre attention pour tous les abonnés. Sois sage.

2. Cécité et déficiences visuelles graves

Le chapitre suivant est consacré aux normes d'accessibilité pour les personnes aveugles et malvoyantes. Ces règles concernent également les troubles visuels, mais les principes et les solutions ici sont totalement différents. Aucune combinaison de couleurs ou de contrastes ne peut aider dans ce cas. Cet aspect de la science de l'accessibilité repose sur l'utilisation d'un logiciel de lecture d'écran.

Par conséquent, notre mission est d'adapter nos e-mails à ces outils. En d'autres termes, nous devons rendre les e-mails lisibles pour ces outils.

A quoi faut-il accorder une attention particulière ici ?

Sujet du courriel

En règle générale, les lecteurs d'écran commencent à lire un e-mail à partir de son sujet.

Ainsi, la règle communément acceptée est simple mais efficace : faites en sorte que votre sujet soit bref et descriptif. Un bon sujet doit expliquer l'essence même du message.

Paramètres de langue

Il est très important de configurer les paramètres de langue dans la copie de l'e-mail. Cette tâche nécessite des efforts et un travail avec la copie d'e-mail, mais cela en vaut la peine. Le problème est que le texte des e-mails vocalisé par les lecteurs d'écran peut sembler terrifiant si vous ignorez ces paramètres. Quelque chose comme des conversations d'orcs du Seigneur des Anneaux

Pour éviter cela, spécifiez la langue respective dans le code e-mail (si disponible).

Ordre logique

Les lecteurs d'écran ont un ordre strict sur la façon de vocaliser les e-mails. Ils lisent les conteneurs et les blocs de gauche à droite, puis passent à la ligne suivante.

Pour fournir l'accessibilité, spécifiez des balises d'en-tête telles que <h1> , <h2> , <p> , etc. dans le code HTML. Ces balises ajouteront la priorité au texte normal, de sorte que ces éléments sont vocalisés en premier.

De plus, la taille de la police n'a pas d'importance lorsque des balises sont spécifiées. Dans l'exemple ci-dessus, la taille de la police du titre 2 est de 24 pixels et la police de copie normale est plus grande - 27 pixels. Mais les lecteurs d'écran vocaliseront le titre 2 en premier.

Texte alternatif

Les technologies de l'IA se développent régulièrement aujourd'hui. Mais les outils de lecture d'écran ne sont toujours pas assez intelligents pour "regarder" les photos dans l'e-mail et les décrire. Peut-être dans un futur proche… De nos jours, ces utilitaires ne peuvent lire que du texte alternatif, c'est-à-dire du texte alternatif que nous ajoutons aux images.

Comment ajuster le texte alternatif aux normes d'accessibilité ? Vous avez bien deviné, c'est assez évident : faites en sorte que ce texte soit concis, descriptif et informatif. Une remarque utile : évitez le mot « image » dans ce texte. La balise image le spécifie déjà, il sera donc un peu bizarre d'entendre la duplication "image image…"

Liens, éléments CTA, icônes sociales

Les liens doivent être aussi concis et informatifs que possible. Ajoutez-y du texte clair et rappelez-vous que les lecteurs d'écran transformeront ce texte en voix ! Faites savoir aux destinataires ce que vous leur offrez et où ils iront en cliquant.

Regardez simplement ces liens:

Le premier lien… euh… sérieusement, j'ai peur d'imaginer à quel point ça va sonner effrayant. Alors que le second spécifie clairement le site Web, la date de publication et le titre du message.

Il en va de même pour les boutons CTA et les icônes de médias sociaux. En fait, ces éléments sont également des hyperliens, simplement enveloppés dans une forme visuelle esthétiquement attrayante. Chaque e-mail marketeur qualifié leur accorde la plus grande attention, travaille sur le design et les effets, choisit des solutions de couleurs parfaites pour générer des clics…

Mais lorsqu'il s'agit de lecteurs d'écran et d'accessibilité pour les personnes aveugles, la seule chose importante ici est le texte. Rendez-le suffisamment accrocheur pour accomplir sa mission – obligez les abonnés à cliquer sur le bouton.

Voici comment nous voyons le bouton CTA dans l'e-mail :

Mais les outils de lecture d'écran ne se soucient pas de toutes nos astuces de concepteur et de nos merveilleux effets de survol. Tout ce que le logiciel voit est le texte brut. Rien d'autre. Assurez-vous donc que votre texte fonctionne tout seul.

Concernant les icônes de réseaux sociaux, certains abonnés qui « écoutent » les e-mails de la boîte de réception peuvent ne pas comprendre les abréviations que nous appliquons à ces icônes. Écrivez donc un texte alternatif descriptif pour ces éléments.

C'est tout à propos de la cécité. Encore une remarque importante : les lecteurs d'écran sont largement utilisés aujourd'hui, et pas seulement par les personnes souffrant de troubles visuels graves. Des millions de destinataires écoutent les emails de leur boîte de réception lorsqu'ils sont occupés, dans la rue, en voiture, etc. Cet aspect de l'accessibilité est donc encore plus vital qu'on ne pourrait l'imaginer.

3. Dyslexie

Les personnes qui souffrent de dyslexie ont tendance à confondre l'ordre des lettres dans le texte, malgré le niveau de QI normal.

Voici des pratiques d'accessibilité pour les destinataires dyslexiques basées sur le post publié par la Association britannique de la dyslexie.

• Évitez de souligner les liens. Comme je l'ai déjà mentionné un peu plus haut, mettez vos liens en gras au lieu de les souligner ;
• Ne commencez pas une nouvelle phrase à la fin d'une ligne. La nouvelle phrase devrait être une nouvelle ligne respectivement;
• Pas de VERROUILLAGE MAJUSCULE si vous avez besoin de surligner/accentuer une certaine idée — utilisez plutôt la police la plus grande ;
• Oubliez l'alignement central - uniquement sur le côté gauche de l'écran ;
• Le fond blanc peut distraire les destinataires dyslexiques, les couleurs crèmes sont plus douces et ne posent pas de difficultés ;
• Terminez toutes les phrases par un point (.), vous devez également utiliser des points-virgules lorsqu'il y a des puces dans la copie de l'e-mail.

4. Surdité et audition partielle

Pour les personnes malentendantes, il n'y a qu'une seule norme. Toutes les vidéos intégrées dans vos e-mails doivent être équipées de sous-titres ou de descriptions textuelles.

Ne vous fiez pas aux sous-titres automatisés fournis par Youtube et d'autres hébergements vidéo. Ils sont souvent, hein hein… pour ne pas dire plus, loin d'être idéaux. Et dans certaines occasions, ils sont même au bord de la schizophasie.

Principaux conseils pour l'accessibilité des e-mails

Je terminerai par notre examen des meilleures pratiques d'accessibilité aujourd'hui. On le voit, cet aspect du travail des email marketeurs est vraiment essentiel. Par conséquent, ne sautez jamais le test d'accessibilité avant de cliquer sur le bouton "Envoyer" ! Vérifiez vos campagnes avec le simulateur de daltonisme susmentionné, envoyez l'e-mail de test à tous les appareils disponibles et écoutez-les avec différents lecteurs d'écran.

Récapitulons maintenant brièvement les points clés de cet article. Comment assurer l'accessibilité ?

• Choisissez différentes couleurs pour créer un schéma de contraste afin d'éviter toute confusion.
• Rédigez des lignes d'objet claires et descriptives ;
• N'oubliez jamais le texte alternatif, ajoutez-le à toutes les images ;
• Si l'animation GIF a un rôle éducatif, fournissez aux lecteurs une description détaillée ;
• N'utilisez pas différentes langues dans un même e-mail, car les lecteurs d'écran ne peuvent fonctionner qu'avec une seule langue à la fois ;
• Vérifiez la pertinence de vos liens ;
• Alignez le texte sur le côté gauche ;
• Créez vos newsletters et e-mails déclenchés avec amour. Prenez soin de tous vos abonnés.

Je vous souhaite sincèrement tout le meilleur. Répandez l'attention et la gentillesse autour de vous !