Skip to main content
Design Email

Accessibilité en email marketing

By No Comments7 min read

L’accessibilité des emails : guide pour une conception inclusive

Assurez-vous que vos campagnes email sont inclusives

L’accessibilité est un enjeu crucial dans le domaine de l’email marketing. Avec l’augmentation de l’utilisation des technologies d’assistance comme les lecteurs d’écran et les assistants personnels (Google Home, Apple HomePod, Amazon Echo), il est essentiel de concevoir des e-mails accessibles à tous.
Ce guide détaillé vous permettra de rendre vos campagnes email inclusives en adaptant vos méthodes de conception des emails.

Pourquoi l’accessibilité des emails est importante

L’accessibilité des emails assure que les informations peuvent être lues et comprises par tous, y compris ceux ayant des déficiences visuelles ou auditives. Les lecteurs d’écran, comme VoiceOver pour iOS et TalkBack pour Android, ainsi que les assistants personnels utilisant des commandes vocales, nécessitent que vos e-mails soient optimisés pour l’accessibilité.
Il est crucial que le code HTML des emails soit conçu correctement, car ces outils préfèrent souvent la version HTML pour la lecture.

Accessibilité : 20 mesures pour adapter la conception graphique et technique de vos emails

  1. Spécifiez la langue du contenu
    • Ajoutez l’attribut lang="" dans la balise <html> pour indiquer la langue du contenu (par exemple, <html lang="fr">). Cela aide les lecteurs d’écran à utiliser la langue appropriée pour la synthèse vocale.
  2. Encodez correctement les caractères HTML
    • Utilisez <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> pour indiquer le type de caractères attendu, évitant ainsi les erreurs d’affichage.
  3. Ajoutez un titre via la balise Title
    • La balise <title> fournit un contexte important aux utilisateurs de technologies d’assistance et est également visible dans les onglets des navigateurs.
  4. Optimisez le rendu des e-mails pour divers DPI
    • Assurez-vous que les images et le contenu s’adaptent correctement aux différents réglages de DPI (points par pouce) pour une présentation cohérente.
  5. Privilégiez le CSS pour le style
    • Utilisez des propriétés CSS pour définir les dimensions des éléments au lieu des attributs HTML, ce qui améliore la compatibilité et l’accessibilité.
  6. Utilisez le preheader pour résumer le contenu
    • Résumez le contenu principal dans le preheader de l’e-mail pour qu’il soit facilement accessible via les lecteurs d’écran et les assistants personnels.
  7. Définissez les attributs Alt pour chaque image
    • Les attributs alt permettent aux lecteurs d’écran de décrire les images. Assurez-vous d’utiliser des descriptions pertinentes ou des attributs alt="" pour les images décoratives.
  8. Attention aux GIFs animés
    • Vérifiez que le contenu principal des GIFs animés est compréhensible dès la première image pour les clients qui bloquent les animations.
  9. Utilisez l’attribut role= »presentation » pour les tableaux de présentation
    • Indiquez que les tableaux sont utilisés pour la présentation et non pour des données, facilitant la navigation pour les lecteurs d’écran.
  10. Appliquez des balises sémantiques
    • Utilisez des balises HTML telles que <h1>, <h2>, <p>, etc., pour structurer le contenu et améliorer la navigation.
  11. Préférez le texte en HTML plutôt qu’en image
    • Le texte en HTML est accessible et indexable, contrairement aux images de texte qui nécessitent un téléchargement.
  12. Assurez une taille de police adéquate
    • Utilisez une taille de police d’au moins 14px avec une hauteur de ligne suffisante pour garantir une bonne lisibilité.
  13. Améliorez le contraste des textes
    • Maintenez un ratio de contraste d’au moins 4.5:1 pour les textes pour assurer une lisibilité optimale.
  14. Maintenez une structure de lecture logique
    • Alignez le texte à gauche pour faciliter la lecture, en particulier pour les longs paragraphes.
  15. Utilisez des liens descriptifs
    • Les textes de lien doivent être informatifs et ne pas se reposer uniquement sur la couleur pour l’identification.
  16. Assurez une zone de clic suffisante pour les boutons et liens
    • Les boutons et les liens doivent avoir une zone de clic d’au moins 44px x 44px pour faciliter l’interaction.
  17. Testez l’agrandissement du texte
    • Assurez-vous que le texte peut être agrandi jusqu’à 200% sans être coupé ou chevauché.
  18. Veillez à la cohérence des tailles de texte sur mobile
    • Adaptez les tailles de texte pour différents appareils en utilisant les media queries pour maintenir une bonne lisibilité.
  19. Vérifiez la structure HTML et utilisez les rôles ARIA si nécessaire
    • Les rôles ARIA (Accessible Rich Internet Applications) sont des attributs HTML utilisés pour améliorer l’accessibilité des contenus web en fournissant des informations supplémentaires aux technologies d’assistance. Cependant, leur utilisation en email marketing est limitée par le support des clients de messagerie. Voici comment utiliser les rôles ARIA lorsque c’est possible :
      • Rôle role="presentation" : Comme mentionné, pour les tableaux utilisés uniquement pour la mise en page, utilisez role="presentation" pour signaler aux lecteurs d’écran que ces tableaux ne contiennent pas de données importantes.
      • Rôle role="banner", role="navigation", role="main", role="contentinfo" : Ces rôles peuvent être utilisés pour structurer le contenu d’un e-mail. Par exemple, le rôle role="banner" peut désigner une section contenant un en-tête ou un logo, tandis que role="navigation" peut désigner des liens de navigation importants.
      • Rôle aria-label : Utilisez aria-label pour fournir une description aux éléments interactifs ou importants lorsque le texte visible n’est pas suffisant. Par exemple, un bouton avec une icône mais sans texte peut utiliser aria-label="Rechercher" pour indiquer sa fonction.
      • Rôle aria-hidden : Utilisez aria-hidden="true" pour masquer des éléments non pertinents pour les lecteurs d’écran. Par exemple, vous pouvez masquer des éléments purement décoratifs ou des éléments qui ne contribuent pas à l’information.

      Limitations et Précautions

      • Support des Clients de Messagerie : De nombreux clients de messagerie ne supportent pas pleinement les rôles ARIA ou peuvent les traiter de manière incorrecte. Par conséquent, il est essentiel de tester vos e-mails sur différents clients de messagerie pour vérifier la compatibilité et l’efficacité des rôles ARIA.
      • Simplicité et Accessibilité : Parfois, il est préférable de se concentrer sur une structure HTML simple et bien formée plutôt que d’utiliser des rôles ARIA qui peuvent ne pas être bien supportés. La priorité doit être d’assurer une structure claire et une présentation accessible du contenu.
  20. Gardez un code léger et concis
    • Utilisez des outils comme HTML Tidy pour nettoyer le code et éviter les balises superflues qui peuvent ralentir le chargement.

Conclusion

L’accessibilité des emails est essentielle pour garantir que vos campagnes touchent la totalité de votre audience.
En intégrant ces pratiques dans vos processus de conception des emails, vous assurez non seulement une meilleure expérience utilisateur mais aussi une conformité aux standards d’accessibilité.
Avec ces ajustements, vos emails seront non seulement visuellement plus clairs et lisibles, sur tous les clients de messageries et webmails, mais aussi inclusifs pour tous vos destinataires.