Ce guide vous guidera à travers une liste de contrôle de plus de trente améliorations que vous pouvez apporter à vos courriels pour vous assurer qu'ils sont aussi accessibles que possible. Il contient également des liens utiles et des didacticiels. Mettez cette page en signet et faites-en votre ressource incontournable pour l'accessibilité du courrier électronique..

Remarque: ce tutoriel fait partie de la totalité du contenu du courrier électronique de Tuts + Web Design: consultez le guide d’apprentissage de Mastering HTML Email pour en savoir plus.!

Email Professionals: il est temps de donner la priorité à l'accessibilité

Nous mettons beaucoup d’efforts dans les lettres d’information, les campagnes marketing et les autres courriels que nous envoyons. Nous élaborons soigneusement le bon message. Nous concevons les visuels avec diligence. Nous testons triomphalement dans Outlook.

Et ça paye. La plupart des gens préfèrent toujours recevoir des courriers électroniques. En tant que canal de marketing, le retour sur investissement moyen est de 32 à 1..

Mais encore, la plupart d'entre nous pourraient faire encore mieux. Les courriels HTML ne sont pas conçus et codés de manière traditionnelle en fonction de l'accessibilité. En conséquence, beaucoup de nos destinataires ont du mal à se joindre à nous et nous refusons une partie de notre public..

Parfois, les améliorations sont évidentes. Si tout votre courrier électronique comporte des caractères d'imprimerie fins, la plupart des personnes âgées de plus de 25 ans auront du mal à le lire. Mais le plus souvent, les barrières que nous plaçons entre notre message et nos destinataires sont plus subtiles. J'admets qu'il m'a fallu un moment pour remarquer le problème sur la photo suivante:

Quel est le problème avec cette image? #accessfail pic.twitter.com/H7tAy5X5ud

- Elisha Friday Wright (@MsFridayology) 24 novembre 2016

Une fois que nous avons pris conscience de ces problèmes, ils sont souvent faciles à résoudre. En lisant cela, vous faites déjà un premier pas important pour rendre vos courriels accessibles à plus de gens..

Si vous débutez dans le codage des courriels, je vous recommande de lire d'abord les tutoriels de Nicole Merlin. Celles-ci vous apprendront les bases des courriels HTML et leur différence par rapport aux pages Web..

Nous allons nous appuyer sur ces compétences pour apprendre à appliquer les considérations d'accessibilité à nos courriels..

Qu'entendons-nous par «accessibilité»?

L'accessibilité au courrier électronique consiste essentiellement à rendre vos courriers électroniques accessibles au plus grand nombre possible de destinataires, quelles que soient leurs circonstances. Nous pensons généralement que l'accessibilité représente différentes incapacités, et c'est vrai, mais c'est en réalité une définition plus large que celle décrite par Sami Keijonen:

«Nous sommes tous différents et nos besoins peuvent changer avec le temps.» - Sami Keijonen

Les incapacités se présentent sous plusieurs formes et sévérités. Le rapport mondial de l'OMS sur le handicap estime que 15% de la population mondiale vit avec un handicap. Selon leur situation, ces personnes peuvent avoir accès à une technologie d'assistance facilitant les tâches quotidiennes. Pour rendre nos courriels plus accessibles, nous devons éviter de placer des barrières devant les personnes et contre les outils sur lesquels elles comptent.

Commencez avec une expérience de base

Choisissez un email que vous avez envoyé récemment. Ouvrez-le sur votre écran ou imprimez-le pour pouvoir prendre des notes dessus.

Quel est l'objectif de l'e-mail? Quelle action les destinataires devraient-ils entreprendre après l'avoir lu ou quelles informations auraient-ils dû apprendre??

Quels sont les éléments de l'e-mail? Comment chacun contribue-t-il à l'objectif? Le courrier électronique aurait-il encore un sens si l'un des paragraphes, des liens ou des images étaient supprimés??

Poser ce genre de questions vous aide à définir un expérience de base-le strict minimum qui doit être communiqué avec succès au destinataire. Cela peut être aussi simple qu’un lien et son étiquette, ou vous pouvez en avoir plus pour passer au travers..

Avant tout, l'expérience de base doit être disponible pour que tous les destinataires puissent y accéder et la comprendre. Et tout le reste devrait être conçu pour ne pas gêner. Maintenant pour les détails…

1. Rendre le texte lisible

Évitez les murs de texte

Plus le paragraphe est long, plus il est difficile à lire. Ceci s’applique à tout le monde, mais particulièrement aux dyslexiques ou à d’autres troubles d’apprentissage..

Voici quelques conseils pour rendre votre texte plus lisible:

• Diviser les longs paragraphes en plus courts. Chaque paragraphe devrait avoir un seul objectif. Lire chaque phrase et voir si elle se concentre sur la même chose que la dernière. Sinon, commencez un nouveau paragraphe.
• Regrouper les paragraphes liés sous des en-têtes descriptifs. Si vous utilisez plusieurs niveaux de titre, assurez-vous que la hiérarchie est logique. généralement, vous utiliserez un 

  pour la rubrique principale,

  s pour chaque section,

  s pour les sous-sections, etc. L'utilisation d'éléments de titre sémantique facilite également la navigation de votre courrier électronique à l'aide de lecteurs d'écran..

• Utilisation italique ou audacieux pour l'accent, mais utilisez-les avec parcimonie. Si vous insistez sur tout, rien ne se démarque.
• Présentez les groupes de points sous forme de puces (
  ) ou numéroté (
  ) Des listes pour les rendre facilement digestibles.
  1. Inclure des graphiques pour visualiser et supporter le contenu du texte.

  Utilisez des mots simples

  Si vous êtes designer ou développeur, écrire ne fera peut-être pas partie de votre travail. Dans ce cas, envisagez de partager ce didacticiel avec votre collègue ou votre client. Lorsque nous travaillons à rendre nos e-mails accessibles, le langage que nous utilisons est au moins aussi critique que les aspects plus visuels ou techniques..

  Rappelez-vous que les gens lisent à différents niveaux de lecture pour plusieurs raisons. Vous pouvez avoir des receveurs atteints de dyslexie. Vous pourriez être en train d'écrire dans leur langue seconde. Ou peut-être qu'ils ne connaissent pas le jargon du sujet.

  Si vous écrivez à un groupe de personnes sur un sujet, vous serez souvent plus versé dans le sujet qu’eux. Plus nous en savons sur quelque chose, plus nous oublions ce que c'est que de ne pas savoir. Ce phénomène est connu sous le nom de "malédiction de la connaissance".

  Si vous ne savez pas si les personnes moins familières avec le sujet peuvent comprendre votre écriture, trouvez quelqu'un à qui demander conseil. Vos collègues peuvent également souffrir de la malédiction du savoir. Peut-être pouvez-vous obtenir l'aide d'un ami, d'un membre de votre famille ou de l'un de vos abonnés?

  Quand j'ai signé pour écrire pour Tuts +, ils m'ont envoyé leur guide de style qui contient quelques exemples de choix de mots en anglais clair:

  Utilisez «acheter», pas «acheter». Utilisez «aide», pas «aider». Utilisez «à propos de», pas «approximativement».

  Pourriez-vous remplacer les mots de vos courriels par des mots plus simples? Que diriez-vous de garder une liste de termes confus que vous utilisez couramment et de mots à utiliser à la place?

  Il existe également plusieurs formules pour mesurer la lisibilité de votre texte.. 
  

  Si vous copiez et collez votre contenu dans Word ou Outlook, vous pouvez évaluer sa lisibilité à l'aide de deux tests: le test Flesch Reading Ease, qui évalue la facilité de lecture de 0 à 100, et le test Flesch-Kincaid, qui évalue à quel niveau de scolarité aux États-Unis quelqu'un comprendrait généralement le texte.

  Ces tests examinent le nombre moyen de mots par phrase et le nombre moyen de syllabes par mot, comme indicateurs de la facilité de lecture du texte..

  Pour des tests plus complets, essayez readable.io. Cet outil en ligne vous permet d'exécuter votre contenu à travers plusieurs tests de lisibilité. Leurs forfaits payants offrent même un outil spécifique pour les e-mails: transférez l'e-mail à une adresse e-mail spécifique, et ils répondent avec un rapport de lisibilité automatisé.

  Utilisez des tailles de police de 14 pixels ou plus grandes

  L'augmentation de la taille de la police n'est pas simplement un truc idiot pour allonger votre essai.

  C'est aussi un moyen simple de rendre vos courriels plus faciles à lire. 14px est le minimum absolu pour la copie de corps. Le texte ici sur Tuts + a une taille de police de 18px, et cela ne semble pas trop volumineux non plus..

  Les titres doivent être suffisamment grands pour se démarquer facilement de la copie au corps. Type Scale est un outil pratique pour calculer et prévisualiser des tailles de police appropriées. En savoir plus sur l'échelle et la hiérarchie grâce à ces tutoriels:

  Assurez-vous d'utiliser des couleurs contrastées
  

  En règle générale, les textes sombres sur fond clair sont les plus faciles à lire pour la plupart des gens..

  Si vous utilisez une combinaison de couleurs peu contrastée, telle que du texte gris clair sur un fond blanc, il peut être difficile de lire pour les personnes malvoyantes ou daltoniennes. Le faible contraste rend également le texte plus difficile à lire dans des conditions d'éclairage défavorables telles que la lumière directe du soleil.

  Un texte clair sur un fond sombre peut également bien fonctionner, en particulier pour les personnes sensibles à la lumière, ou lors de l'utilisation d'un écran lumineux dans un environnement sombre. Mais pour les personnes atteintes de presbytie (vision floue), un texte clair sur un fond sombre crée une sorte d’effet de halo ou de rayonnement. Tout le monde finit par faire l'expérience de la presbytie dans une certaine mesure. La capacité de nos yeux à se concentrer diminue avec l'âge, généralement à partir de 40 ans..

  Il existe de nombreux outils pour vérifier si votre contraste de couleur est suffisamment élevé:

  • contrast-ratio.com est un outil utile avec un nom de domaine mémorable. Lorsque vous entrez une combinaison de couleurs, il visualise instantanément le contraste et modifie la barre d'adresse en lien direct afin que vous puissiez partager la combinaison de couleurs..
  • J'aime aussi beaucoup le système de contraste de tanaguru, qui suggère d'autres options de couleur si le contraste est trop faible..

  
  

  C'est vrai, PapayaWhip et DarkSlateGrey, magnifique

  Évitez les poids minces des polices

  Les polices ultra-légères sont populaires auprès des concepteurs depuis quelques années maintenant, mais elles sont moins populaires chez les personnes malvoyantes.

  Bon contraste, faible poids de la police

  Combinés à des contrastes de couleurs faibles et à des écrans plus anciens, ces poids de police sont particulièrement difficiles à lire. Pour une meilleure expérience de lecture, utilisez des poids de 500 (normal) et plus.

  Alignez votre copie du corps, ne justifiez pas ou centrez

  Les langues lues de gauche à droite, comme l'anglais, sont les plus faciles à lire lorsqu'elles sont alignées à gauche. Pour les scripts de droite à gauche tels que ceux utilisés en arabe, persan et hébreu, alignez le texte à droite..

  Même si vous préférez l'aspect du texte centré, évitez-le si vous le pouvez. Le texte est plus facile à lire pour tout le monde lorsque chaque ligne commence juste en dessous de la précédente. Cela est vrai même pour les titres, mais est particulièrement important pour la copie de corps.

  Enfin, vous ne devez jamais utiliser un alignement justifié, où le texte est organisé de manière à présenter des bords égaux des deux côtés. Le texte justifié est plus difficile à lire en général, et en particulier dans les navigateurs Web et les clients de messagerie, qui gèrent mal la justification..

  Utiliser une hauteur de ligne suffisante

  Les mots ont besoin d'espace pour respirer.

  Si les lignes de texte sont trop proches les unes des autres, elles peuvent être difficiles à séparer. Il devient trop facile de sauter accidentellement sur la mauvaise ligne. S'ils sont trop éloignés l'un de l'autre, ils commencent à ressembler à des paragraphes séparés.

  La meilleure hauteur de ligne à utiliser dépend de la taille de la police et de la longueur de la ligne. Mais si vous voulez une règle générale rapide, vous ne pouvez pas vous tromper avec une hauteur de trait de 1,5 fois la taille de la police. Par exemple, une taille de police de 16 px serait confortable à lire avec une hauteur de ligne de 24 px.

  Support client de messagerie pour le hauteur de la ligne La propriété est généralement solide, à l'exception d'un comportement étrange dans Outlook. Utilisation px des valeurs au lieu de em, pourcentage, ou valeurs «sans unité» pour des résultats plus cohérents.

  Rendre la longueur de ligne (la «mesure») lisible

  Plus vous avancez dans une ligne de texte, plus il est difficile de retrouver votre chemin de départ..

  Si votre texte est trop large, l'œil doit bouger beaucoup et il est difficile de continuer à lire d'une ligne à l'autre..

  Pour une lisibilité optimale, visez une longueur de ligne d'environ 45 à 75 caractères..

  La taille de la police, la hauteur et la longueur de la ligne s’influencent mutuellement. Il y a beaucoup d'approches pour décider des proportions. Certaines personnes aiment utiliser le nombre d'or (même si ses propriétés magiques ne sont pas nécessairement la recette du succès). À l'aide de la calculatrice de typographie Golden Ratio, vous pouvez obtenir rapidement des recommandations sur la hauteur des lignes et calculer la longueur approximative des lignes (CPL ou caractères par ligne) en fonction de la taille de la police et de la largeur de la colonne.

  Utiliser le balisage sémantique

  Traditionnellement, les développeurs de messagerie ont codé chaque partie de leurs e-mails en tant que balises de table, y compris des lignes de table distinctes pour chaque en-tête et paragraphe. Cela s'explique en partie par le fait que certains clients de messagerie avaient l'habitude de modifier le style des éléments sémantiques, mais aussi parce que les gens se familiarisaient si bien avec le fonctionnement des tableaux HTML qu'ils ont fini par les utiliser par défaut..

  Comme dit le proverbe: si vous n’avez qu’un marteau, tout ressemble à un clou.

  Mais comme les clients de messagerie ont amélioré leur rendu et que nous, les développeurs de messagerie, avons collectivement amélioré nos pratiques de codage, nombreux sont ceux qui ont constaté qu'il y avait plus d'inconvénients que d'avantages dans le style de codage basé sur les tableaux..

  Si vous préférez coder vos paragraphes, listes et en-têtes,

  ,

  ,
  ,

  ,

  , etc., les personnes utilisant des lecteurs d'écran et d'autres technologies d'assistance navigueront plus facilement et donneront un sens à votre contenu.

  Vous aurez toujours le même niveau de contrôle sur l'apparence de votre contenu en le stylant avec CSS, et il sera plus accessible, avec moins de code. Vous voudrez appliquer les marges souhaitées pour chaque élément, tandis que des styles tels que la taille et la couleur de la police de copie du corps peuvent être définis sur un élément parent et hérités de tous les paragraphes..

  Voici un exemple de base:

   
  Prektig arvelige bankaker
   
  Grundigere vitende enkelstående est le meilleur du monde, mais il est difficile, mais il est difficile de regarder, vous pouvez également regarder la tente.
   
  Hyss gjeldsbevis luftdraget broderi, unyttig hvorledes ringeaktende begriper.
   

  Utilisez le lang Attribut

  La plupart des ordinateurs et des smartphones sont livrés avec un logiciel de lecture d'écran qui lit le texte sous forme de discours. Afin de prononcer les mots correctement et non comme un cascadeur italien, les lecteurs d'écran doivent savoir dans quelle langue votre texte est écrit..

  Pour spécifier la langue du contenu, nous utilisons le lang attribut. Voici un exemple rapide de la façon dont une phrase française sonne avec et sans la langue spécifiée (vidéo de Léonie Watson):

  le lang attribut fonctionne avec n'importe quel élément HTML. Si vous utilisez différents éléments dans le même courrier électronique, spécifiez la langue correcte pour chaque partie..
  

  La langue principale doit être définie pour le élément. Mais comme certains clients de messagerie suppriment cet élément lors de l'affichage de l'e-mail, il est plus sûr de répéter également l'attribut sur un élément wrapper à l'intérieur de l'élément. , tel qu'un

  autour du contenu entier de l'email.

  Pour trouver la valeur appropriée à utiliser pour votre langue, vous pouvez vous référer au registre des sous-étiquettes de langues IANA, qui est un long fichier texte de langues et de leurs valeurs de sous-étiquettes correspondantes. Ou utilisez la recherche de sous-étiquettes de langue plus conviviale qui vous permet de rechercher les mêmes informations.

  Voici la phrase française d'avant, avec la langue correctement définie:

  water monte to fur and mesure of fonte of neiges.

  2. Utiliser la couleur avec précaution

  Ne communiquez pas uniquement avec la couleur

  Une utilisation réfléchie de la couleur peut aider à soutenir votre message ou à transmettre une humeur. Mais si vous ne vous fiez qu'à la couleur pour communiquer certaines informations, les destinataires aveugles, daltoniens ou d'une culture où ces couleurs ont un sens différent peuvent rater.

  Par exemple, au lieu d'utiliser un point rouge ou vert pour indiquer si un produit est en stock, utilisez un texte du type "en stock" et "épuisé", et utilisez la couleur uniquement pour le prendre en charge..

  Prendre en compte le daltonisme

  Il existe différents types de daltonisme qui rendent difficile la distinction des couleurs. Le type le plus courant est le daltonisme rouge-vert, ce qui rend difficile la distinction des teintes rouge et verte. Le daltonisme total, qui rend tout noir ou blanc, est rare.

  Lorsque vous choisissez des couleurs pour le texte, les graphiques et les éléments de mise en page, faites attention aux combinaisons de couleurs de la gamme rouge-orange-jaune-vert placées proches les unes des autres. Surtout si les couleurs sont similaires en luminosité et saturation.

  Il existe également d'autres combinaisons de couleurs qui peuvent être difficiles à distinguer pour les personnes atteintes de différents types de daltonisme. Vous pouvez utiliser un simulateur de daltonisme pour détecter les problèmes éventuels dans vos courriels. Il y en a beaucoup à choisir. 

  • Avec le filtre de pages Web Colorblind de Toptal, vous pouvez entrer l'URL de la version Web de votre courrier électronique.. 
  • Litmus a un filtre de daltonisme intégré à ses tests de messagerie. 
  • Color Oracle (Mac, Windows et Linux) et Sim Daltonism (Mac et iOS) sont des outils de simulation en source ouverte..

  Ne pas abuser de couleurs vives et saturées

  Pour les personnes souffrant de sensibilité à la lumière et de migraines, regarder des écrans rétro-éclairés peut causer une fatigue oculaire et agir comme un déclencheur de migraine. Cela peut être aggravé par des couleurs vives, en particulier dans les tons bleus et rouges.

  Pour les grandes zones telles que les couleurs d'arrière-plan, utilisez des couleurs plus douces lorsque cela est possible.

  Évitez le texte non lié souligné ou coloré (surtout le bleu)

  Tous les liens ne sont pas bleus et soulignés, mais tous les textes soulignés et bleus sont liés. Au moins c'est ce que les lecteurs attendent.

  Pour éviter toute confusion et frustration, n'utilisez pas de soulignement ou de couleurs pour la souligner..

  3. Vérifiez que vos images sont accessibles

  Éviter le texte dans les images

  De nombreux expéditeurs continuent de concevoir des courriels avec du texte dans des images plutôt que du texte HTML en direct. Si votre employeur ou votre client exige un rendu parfait des pixels, il est facile de voir en quoi cela peut sembler une bonne solution. Mais les inconvénients de piéger le texte dans des fichiers image l'emportent sur les avantages.

  • Les lecteurs d'écran ne peuvent pas lire le texte dans les images.
  • Si le blocage des images est activé dans le client de messagerie ou si l'e-mail est lu hors connexion, les images sont interrompues..
  • Vous ne pouvez pas sélectionner, copier et coller le texte.
  • Le logiciel de traduction ne peut pas interpréter le contenu.
  • Le texte ne peut pas être correctement mis à l'échelle ou reflété pour s'adapter à différentes tailles d'écran ou niveaux de zoom.

  Certains de ces problèmes peuvent être partiellement résolus en définissant le contenu comme texte alternatif de l'image et en le stylant avec CSS. Malheureusement, les clients de messagerie ne partagent pas une méthode cohérente de gestion du blocage d’image et du texte de remplacement. Et toute hiérarchie, telle que les en-têtes, serait perdue dans la version texte alternative du contenu.

  Si votre conception appelle du texte placé sur une image, backgrounds.cm vous aide à la coder de manière à fonctionner avec la plupart des clients de messagerie..

  Enfin, dans les cas où vous ne pouvez pas éviter d’utiliser des images pour le texte, ajoutez le role = "text" à l'image pour que les lecteurs d'écran traitent sa valeur de texte alternative comme du texte normal.

  Utiliser un texte de remplacement utile

  Nous utilisons des images à différentes fins. Certains contiennent des informations importantes, d'autres sont des illustrations ou font partie de la mise en page..

  Toutes les images doivent avoir un alt attribut, mais l'attribut ne doit pas toujours avoir une valeur. Dans les cas où le texte alternatif n'est pas nécessaire, utilisez un blanc alt attribut empêchant les lecteurs d’écran d’épeler le nom du fichier image ou l’URL du lien. Découvrez cet exemple de Rémi Parmentier:

  
  

  Si l’image a un contenu précieux, décrivez-la dans le texte alternatif. Ou si l’image est un lien, ajoutez un texte alternatif pour décrire où le lien pointe vers.

  Le W3C a un arbre de décision pratique pour le texte alternatif. Il couvre la plupart des utilisations courantes des images et explique comment utiliser le alt attribut dans chaque cas.

  Utiliser les GIF de manière responsable

  Notre principale option pour inclure des animations dans nos e-mails qui fonctionneront dans la plupart des clients de messagerie est d'utiliser des GIF. Nous avons vu beaucoup d'excellents exemples de GIF dans les courriels. Ils peuvent être très utiles pour expliquer des idées plus efficacement que pour une image statique ou pour ajouter un intérêt visuel. Les comptes à rebours et les aperçus vidéo sont d’autres utilisations populaires.

  Malheureusement, les GIF peuvent causer des problèmes à certains destinataires.

  Dans des exemples extrêmes, des animations intenses peuvent déclencher des convulsions chez les personnes souffrant d'épilepsie photosensible. Si vous utilisez des fichiers GIF caractérisés par des couleurs clignotantes ou clignotantes ou des motifs gras contrastés, il est conseillé de les tester à l'aide de l'outil d'analyse de l'épilepsie photosensible gratuit de Trace Center (Windows uniquement). Cet outil capture des animations à partir de votre écran et identifie les risques potentiels de saisie..

  Bien que moins dramatiques, des animations subtiles peuvent également causer des problèmes. Les fichiers GIF en boucle peuvent détourner l'attention de votre autre contenu, en particulier pour les personnes atteintes de trouble d'hyperactivité avec déficit de l'attention (TDAH) ou d'autisme. Email on Acid propose certaines des meilleures pratiques d'animation pour les abonnés atteints de TDAH.

  4. Faites attention à la mise en page et aux tableaux

  Évitez les tables inutiles

  Bien que les tableaux HTML soient nécessaires pour que certaines mises en forme s'affichent correctement dans les clients de messagerie, en particulier dans Outlook, les développeurs de messagerie ont tendance à les utiliser trop souvent..

  Je recommanderais de rechercher dans votre code de modèle chaque instance de  et évaluer si cette table est nécessaire. Je rencontre souvent

   étiquettes qui pourraient facilement être remplacées par un plus accessible et léger

  , ou même complètement supprimé, sans que cela affecte la façon dont le courrier électronique est rendu.

  Utilisation role = "presentation" sur les tableaux de mise en page

  Sur les tables restantes, ajoutez le role = "presentation" attribut. Les lecteurs d'écran annoncent généralement chaque cellule de table rencontrée, ce qui peut rendre les courriels très fastidieux à lire.

  En ajoutant role = "presentation", vous indiquez au lecteur d'écran de traiter la table comme un élément de texte normal et de ne pas y naviguer comme une table de données. Découvrez les exemples d'accessibilité dans le courrier électronique: Partie II par Mark Robbins.

  Si vos emails contiennent des tableaux contenant des données tabulaires réelles, n’utilisez pas le rôle attribuer à ceux.

  Utilisation aria-hidden = "true" sur les éléments d'espacement

  Comme les marges et les bourrages ont une prise en charge quelque peu incohérente sur les clients de messagerie, il n’est pas rare d’utiliser des éléments séparés tels que

  s ou même des images d'espacement old-school pour ajouter de l'espacement à une conception de courrier électronique.

  Ces éléments d'espacement n'ajoutent aucune valeur aux personnes lisant votre courrier électronique avec un lecteur d'écran. Pour que les lecteurs d’écran ignorent un spacer, ajoutez le aria-hidden = "true" attribuer à l'élément.

  5. Concevoir des liens clairs et des cibles de clic

  Rendre les liens évidents, au-delà de la couleur

  Les liens constituent souvent la partie la plus importante d'un courrier électronique, car ils constituent le moyen par lequel vos destinataires passent à l'étape suivante. Leur donner une couleur différente de celle du reste du contenu facilitera leur recherche. Le texte en bleu a plus de chances d'être reconnu comme un lien, mais vous pouvez utiliser d'autres couleurs tant qu'elles se distinguent, même pour les utilisateurs daltoniens..

  Évitez d’utiliser la couleur de votre lien pour le texte non cliquable, pour éviter toute confusion..

  Souligner le texte aide également à suggérer qu'il est cliquable. Certains préfèrent mettre leurs liens en gras pour des raisons esthétiques, mais il vaut peut-être la peine de réserver un texte en gras pour le mettre en valeur..

  Il est généralement préférable d'éviter les «boutons fantômes», un style commun de boutons avec une couleur de contour mais un arrière-plan transparent. Les destinataires peuvent avoir du mal à reconnaître qu'ils sont cliquables, en particulier lorsqu'ils sont placés au-dessus d'une image d'arrière-plan. Les styles de boutons avec une couleur de fond contrastée sont plus faciles à découvrir.

  Utiliser un texte de lien utile

  Les personnes qui lisent votre courrier électronique avec un lecteur d'écran peuvent sauter d'un lien à l'autre sans lire le contenu qui les sépare. Et les destinataires de la basse vision peuvent lire votre email zoomé, manquant le contexte autour de vos liens. Pour que les liens leur soient accessibles, le texte du lien doit pouvoir être autonome tout en ayant un sens..

  Un texte de lien court et descriptif aide les gens à naviguer efficacement.

  Les liens pointant vers des endroits différents ne doivent pas avoir le même texte. Rendre chacun d'eux unique, pas de liens «Lire plus»!

  Évitez d'afficher les URL de site Web longues sous forme de lien, car elles sont généralement moins utiles comme texte de lien pour tous les destinataires.. 

  Créez des boutons gros et entièrement cliquables

  Pour les liens les plus importants dans votre courrier électronique, un gros gros bouton d'appel à l'action peut vous donner une belle augmentation du nombre de clics sur les liens de texte..

  Le fait de disposer d'une zone suffisamment large rend le bouton plus facile à utiliser, en particulier pour les utilisateurs handicapés physiques..

  Litmus a un bon aperçu des manières de coder les boutons de courrier électronique. Pour éviter les difficultés et la frustration, choisissez-en un sur lequel vous pouvez cliquer sur toute la surface du bouton..

  

  Cela dit, j'ai une préférence personnelle pour buttons.cm.

  Ne faites pas de tout un lien

  Pour augmenter les clics, il peut être tentant de transformer chaque titre, image et même paragraphe en lien vers votre page de destination. Cela signifie également que les gens peuvent cliquer sur le lien facilement sans être trop précis. Cependant, il y a des inconvénients à faire tout un lien.

  Pour les personnes lisant votre courrier électronique avec un lecteur d'écran, chaque lien sera lu. Répéter le même lien pour chaque élément rendra la messagerie fastidieuse..

  Si vous avez des éléments proches les uns des autres qui devraient être liés au même endroit, par exemple une icône avec une étiquette de texte, une bonne solution consiste souvent à les envelopper dans le même lien, en créant une seule zone cliquable..

  Si la plupart de vos courriels sont constitués de liens, cela peut également rendre votre courrier difficile à faire défiler sur les téléphones mobiles et autres écrans tactiles. Surtout pour les personnes ayant des tremblements ou d'autres problèmes de contrôle musculaire, transmettre un courrier électronique sans cliquer accidentellement sur des liens inattendus peut constituer un défi.

  Considérer :flotter et :concentrer modes

  Donner des liens un subtil :flotter style est un moyen simple de confirmer aux gens que ce qu’ils sont sur le point de cliquer est en fait un lien.

  Lorsque vous parcourez les liens dans un courrier électronique au clavier, :concentrer Les styles aident vos lecteurs à garder une trace de leur lien. La plupart des clients de messagerie et des navigateurs ajoutent un contour par défaut :concentrer style pour les liens. Il est généralement préférable de ne pas supprimer ce contour, mais si vous le faites, vous devez le remplacer par un autre :concentrer style.

  Chaque fois que vous ajoutez un :flotter

  Création de sites web

  Guide du débutant pour la mise en file d'attente de jQuery

  Guide du débutant pour dessiner une tenue de base sur un personnage dans Photoshop

  

  ×