Directives d'accessibilité des e-mails ou rendez vos e-mails conviviaux pour tous

Publié: 2019-10-16

L'accessibilité des e-mails rend vos e-mails conviviaux pour tout le monde, y compris les personnes handicapées, car elle leur permet de percevoir vos e-mails et d'interagir facilement avec eux.

Vous pouvez effectuer quelques ajustements de conception et de copie pour rendre vos e-mails plus accessibles. Dans cet article, nous expliquerons comment l'utilisation de l'accessibilité aura un impact sur vos campagnes par e-mail, pourquoi c'est important et comment la mettre en pratique.

Contenu
  1. Pourquoi l'accessibilité est importante
  2. Comment créer un e-mail accessible
    1. Structure
    2. Code
    3. Polices
    4. Couleurs
    5. Zoom avant et arrière

Pourquoi l'accessibilité est importante

Alors pourquoi devriez-vous vous préoccuper de l'accessibilité et quels avantages cela peut-il vous apporter, à vous et à votre entreprise ? Voyons quelques faits :

  1. En général, 15 % de la population mondiale, soit 1 milliard de personnes, souffrent d'un handicap. Selon l'Organisation mondiale de la santé, environ 1,3 milliard de personnes dans le monde vivent avec une forme de déficience visuelle : 36 millions de personnes ne voient pas du tout et 217 millions ont une déficience visuelle modérée à sévère. Comme vous pouvez le constater, un très grand nombre de personnes peuvent avoir des problèmes avec différentes activités quotidiennes, notamment l'interaction avec les appareils et la lecture des e-mails.
  2. En dehors de cela, le marché du handicap représente 1,2 billion de dollars de revenu disponible annuel.
  3. Selon une étude récente de Cone Communications, 78% des Américains souhaitent que les entreprises abordent les problèmes sociaux, et 87% achèteraient un produit d'une entreprise qui prend en charge le problème auquel ils se soucient personnellement.

Ainsi, en utilisant l'accessibilité par e-mail, non seulement vous élargissez votre audience et ouvrez de nouvelles opportunités pour plus de profit, mais vous montrez également votre respect et votre souci de chacun, ce qui augmente votre crédibilité aux yeux des utilisateurs socialement responsables et des personnes handicapées.

Comment créer un e-mail accessible

Dans cette section, nous examinerons sept éléments qui peuvent vous aider à rendre vos e-mails plus accessibles à tous :

  • structure;
  • code;
  • Texte alternatif;
  • liens et boutons ;
  • polices de caractères;
  • couleurs;
  • zoom avant et arrière.

En plus de ces éléments, nous vous recommandons de consulter les directives d'accessibilité de la liste de critères du World Wide Web Consortium, qui vous aideront à vous assurer que votre contenu Web est accessible aux personnes handicapées.

Structure

Tout d'abord, assurez-vous de placer le contenu de votre e-mail dans un ordre logique, car les lecteurs d'écran le comprennent de gauche à droite et de haut en bas. Lisez vos e-mails à haute voix pour voir s'il est facile de comprendre la copie elle-même sans regarder les images.

Par exemple, Collaborative Fund garde une bonne structure logique dans ses e-mails, il est donc très facile de les suivre des yeux et avec un lecteur d'écran.

accessible email example
Un e-mail de Collaborative Fund avec une commande de contenu logique

Pour les personnes souffrant de dyslexie et de troubles cognitifs, il peut être difficile de comprendre de gros morceaux de texte complexes. C'est pourquoi nous vous recommandons d'aller droit au but dans votre texte, en raccourcissant vos phrases et en évitant les mots longs ou de jargon. Organisez une pensée dans une seule phrase et un sujet dans un seul paragraphe.

Pour tester la lisibilité de votre texte, utilisez des services comme Readable. Vous pouvez y coller votre texte et l'outil mettra automatiquement en évidence les phrases longues ou les mots complexes et proposera des alternatives et des synonymes plus faciles. Jetez un œil à Readable en action :

Vérifier la lisibilité d'un texte avec Readable

Code

Ensuite, jetez un œil à votre code. Il devrait y avoir des éléments de titre comme h1 , h2 et la balise de paragraphe p , et ainsi de suite. Cela permettra aux lecteurs d'écran de naviguer dans votre courrier électronique. Une balise HTML de langue lang=”” permettra à toute technologie d'assistance de comprendre quel profil de langue utiliser pour le contenu. Accédez à une liste de toutes les balises de langue HTML pour trouver le code de la langue dont vous avez besoin.

Pour nettoyer votre code et vous assurer que vous n'avez pas de balises non fermées et d'autres problèmes, vous pouvez utiliser différents outils de test de messagerie.

Par exemple, pour éviter tout problème d'affichage correct de votre contenu au format visuel ou audio, vous pouvez essayer Dirty Markup. Collez simplement votre code et cliquez sur « Nettoyer ».

Comment nettoyer votre code de messagerie avec Dirty Markup

Texte alternatif

Incluez toujours un texte alternatif détaillé, ou texte alternatif, pour les images - vous devez transmettre le but ou la signification de l'image afin que les abonnés qui utilisent une technologie d'assistance ou qui ont désactivé les images comprennent le contexte global.

Sur l'exemple de Messy Nessy Chic, vous pouvez voir que chaque image a un texte alternatif, y compris les boutons de réseaux sociaux dans le pied de page de l'e-mail.

accessibility email example
Texte alternatif pour les images dans un e-mail de Messy Nessy Chic

Si votre e-mail contient des images décoratives (celles utilisées pour la conception visuelle et n'attribuant pas de signification spécifique), vous devez y ajouter un attribut vide alt=”” . Cela obligera les lecteurs d'écran à sauter l'image.

Liens et boutons

En ce qui concerne la copie, évitez le texte comme « Cliquez ici » et placez un lien hypertexte dans le contexte d'une phrase. Cela permettra aux utilisateurs de comprendre plus facilement où le lien va les rediriger. Et rappelez-vous, vos liens doivent être distinguables du texte environnant.

Jetez un œil à l'exemple d'InsightTimer ; ils utilisent un texte de lien hypertexte clair, qui serait facile à comprendre même pour ceux qui ne peuvent pas lire l'e-mail eux-mêmes.

accessible email example
Liens hypertexte dans un e-mail d'InsightTimer

En ce qui concerne les boutons d'appel à l'action, gardez-les suffisamment grands pour être touchés par n'importe quel pouce sur n'importe quel appareil. Entourez vos boutons d'un espace blanc suffisant pour qu'il n'y ait pas de pressions accidentelles.

Polices

La taille de la police dans un e-mail accessible ne doit pas être inférieure à 14 pixels. De plus, vous devez utiliser des polices sécurisées pour le Web, qui s'afficheront correctement sur la plupart des appareils et systèmes d'exploitation. Ces polices sont Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Trebuchet MS, Times New Roman et Verdana. En savoir plus sur le choix d'une police parfaite pour vos e-mails sur notre blog.

De plus, nous vous conseillons d'appliquer un alignement à gauche pour le texte. Pendant la lecture, le début de chaque nouvelle ligne sert de point d'ancrage pour nos yeux. Lorsque l'alignement est centré, chaque ligne commence à un point différent, faisant sauter l'utilisateur d'une ligne à l'autre. Avec un alignement justifié, à son tour, l'espacement entre les mots est différent à chaque fois. C'est pourquoi garder cette ancre visuelle au même endroit, ou utiliser un alignement à gauche, est votre meilleur choix à des fins de lisibilité.

Il est également recommandé de diviser votre texte par des titres, des guillemets et d'autres types de mise en forme.

Brain Pickings propose des e-mails très longs et riches en contenu qui se composent principalement de texte, mais il est facile de les « digérer » en raison de leurs choix de formatage.

accessible email example
Formatage du texte dans l'e-mail de BrainPickings

Couleurs

Tout d'abord, vous devez vérifier si les couleurs de votre e-mail sont suffisamment contrastées pour qu'il soit accessible aux personnes ayant des problèmes de vision. Par exemple, il est recommandé que le rapport pour le texte normal soit d'au moins 4,5:1 et de 3:1 pour le texte agrandi, qui est souvent utilisé dans les en-têtes.

Pour vérifier un bon contraste en termes d'accessibilité des e-mails, vous pouvez utiliser des outils comme Tanaguru ou WebAIM. Ils vous permettent de voir le rapport de contraste de votre premier plan et de votre arrière-plan. Are My Colors Accessible est une autre excellente option pour vérifier s'il est facile de comprendre votre e-mail.

Par exemple, si nous vérifions la combinaison standard texte noir et fond blanc, nous pouvons voir que le rapport de contraste est très élevé : 21:1. Cependant, lorsque nous changeons la couleur d'arrière-plan en orange, le rapport tombe à 10,63:1.

Vérification du rapport de contraste dans l'outil Mes couleurs sont accessibles

Zoom avant et arrière

Pour les utilisateurs malvoyants, les paramètres de zoom sont souvent utilisés pour augmenter la taille du texte et d'autres éléments visuels sur un écran. Vérifiez donc s'il est possible de zoomer votre email à au moins 200% sans perdre la qualité du contenu.

Ci-dessous, vous pouvez voir un fragment de l'e-mail The Futur que nous avons zoomé à 200% - tout le contenu de l'e-mail est resté visible et peut être lu clairement.

accessible email example
Zoom sur un e-mail de The Futur

En tout

Lorsque vous créez un e-mail accessible, essayez de garder ces points à l'esprit :

  1. Maintenez une structure de lecture logique de votre e-mail.
  2. Utilisez un code propre avec les balises appropriées requises par les appareils fonctionnels.
  3. Incluez un texte alternatif informatif pour chaque image dans votre e-mail, y compris les boutons de réseaux sociaux et votre logo.
  4. Assurez-vous que tous vos liens et boutons sont utilisables ou faciles à interagir.
  5. Gardez vos polices à un minimum de 14px, utilisez une mise en forme appropriée et alignez votre texte à gauche.
  6. Tenez-vous en à un bon contraste entre les couleurs d'arrière-plan et de premier plan.
  7. Assurez-vous que votre contenu peut être zoomé à au moins 200% sans perte de contenu.

La mise en œuvre de l'accessibilité de la messagerie sans expérience préalable peut être intimidante. Cependant, lorsque vous analysez son impact potentiel, il est clair que ce travail vaut la peine d'être fait. Essayez SendPulse pour créer des modèles d'e-mails propres et accessibles et envoyez-les à tous vos abonnés.