Une agence gouvernementale a envoyé une notification importante concernant des prestations à des millions de destinataires. L'email était superbe—design épuré, hiérarchie claire, appel à l’action mis en avant. Mais pour les 15 % de destinataires utilisant des lecteurs d'écran, il était incompréhensible. Les images n'avaient pas de texte alternatif. L'ordre de lecture était brouillé. Les liens disaient « cliquez ici » sans contexte. Des milliers de personnes n'ont pas pu accéder aux informations dont elles avaient besoin.
L'accessibilité des emails n'est pas facultative—elle est essentielle. Au-delà des exigences légales dans de nombreuses juridictions, des emails accessibles fonctionnent simplement mieux pour tous. Les pratiques qui aident les utilisateurs de lecteurs d’écran améliorent aussi la lisibilité sur mobile, les performances en faible bande passante et l’expérience utilisateur globale.
Pourquoi l'accessibilité des emails est importante
L’accessibilité concerne plus de personnes qu’on ne l’imagine.
Les déficiences visuelles vont de la cécité complète au daltonisme en passant par la basse vision. Les utilisateurs de lecteurs d’écran ont besoin d’un contenu correctement structuré. Les personnes daltoniennes ont besoin que l’information soit transmise autrement que par la couleur seule. Les personnes avec une basse vision ont besoin d’un contraste suffisant et de texte pouvant être agrandi.
Les handicaps moteurs affectent la façon dont on interagit avec les emails. Certains utilisateurs ne peuvent pas utiliser une souris et naviguent uniquement au clavier. Les zones tactiles doivent être suffisamment grandes pour les utilisateurs ayant une dextérité limitée.
Les handicaps cognitifs affectent la manière dont les informations sont traitées. Un langage clair, une structure cohérente et un contenu ciblé aident les utilisateurs avec dyslexie, TDAH et d’autres différences cognitives.
Les limitations situationnelles touchent tout le monde à certains moments. Lire un email en plein soleil, sur un petit écran ou en étant distrait crée des besoins d’accessibilité temporaires. De bonnes pratiques d’accessibilité aident dans toutes ces situations.
Des exigences légales existent dans de nombreux endroits. L’ADA aux États-Unis, l’Equality Act au Royaume-Uni, et des lois similaires ailleurs exigent des communications accessibles. Bien que l’application spécifique aux emails soit limitée, le paysage juridique évolue.
Structure sémantique
Une structure HTML correcte est la base d'un email accessible.
Utilisez les éléments HTML sémantiques de manière appropriée. Les titres (h1, h2, h3) doivent refléter la hiérarchie du contenu, pas seulement le style visuel. Un utilisateur de lecteur d'écran qui navigue par titres doit pouvoir comprendre la structure de votre email.
Ne sautez pas de niveaux de titres. Passer de h1 à h3 sans h2 perturbe les lecteurs d'écran et les utilisateurs. Maintenez une hiérarchie logique même si vous souhaitez des tailles visuelles différentes.
Utilisez des listes pour du contenu listé. Si vous présentez une série d'éléments, utilisez des éléments ul ou ol, pas seulement des retours à la ligne. Les lecteurs d'écran annoncent les listes et leur longueur, ce qui aide les utilisateurs à comprendre la structure du contenu.
Les tableaux ne devraient servir qu'aux données tabulaires, pas à la mise en page. Si vous devez utiliser des tableaux pour la mise en page (le rendu email l'exige parfois), utilisez role="presentation" pour indiquer aux lecteurs d'écran d'ignorer la structure du tableau.
L’ordre de lecture est important. Les lecteurs d’écran suivent l’ordre du DOM, pas l’ordre visuel. Si votre email utilise des mises en page complexes, assurez-vous que l’ordre HTML a du sens lorsqu’il est lu linéairement.
Images et texte alternatif
Les images doivent avoir des alternatives textuelles pour les utilisateurs qui ne peuvent pas les voir.
Chaque image porteuse d'information doit avoir un texte alternatif. Décrivez ce que montre l’image et pourquoi c’est important. « Photo du produit » est faible. « Chaussures de course bleues, modèle X500, maintenant à -30 % » est utile.
Les images décoratives doivent avoir un attribut alt vide (alt=""). Cela indique aux lecteurs d’écran de les ignorer. N’omettez pas complètement l’attribut alt—cela amène les lecteurs d’écran à lire le nom de fichier, ce qui est pire.
Les images complexes comme les graphiques ou infographies nécessitent des descriptions détaillées. Fournissez soit un alt text exhaustif, soit un lien vers une description textuelle. Un graphique montrant des tendances de ventes doit transmettre les données réelles en texte.
Ne comptez pas sur les images pour des informations critiques. Si votre CTA est une image, que se passe-t-il lorsque les images ne se chargent pas ? Prévoyez toujours des alternatives textuelles pour le contenu essentiel.
Les emails composés uniquement d'images sont, par définition, inaccessibles. Certains destinataires bloquent les images par défaut. Les utilisateurs de lecteurs d’écran n’obtiennent rien d’utile. Incluez toujours du véritable contenu textuel.
Couleur et contraste
Les choix de couleurs ont un impact significatif sur l’accessibilité.
Maintenez un contraste suffisant entre le texte et l’arrière-plan. Les directives WCAG recommandent au moins un ratio de contraste de 4,5:1 pour le texte normal et de 3:1 pour le texte large. Utilisez des outils de vérification de contraste pour valider.
Ne transmettez pas l’information par la couleur seule. Si vous utilisez le rouge pour les erreurs et le vert pour les succès, ajoutez aussi des icônes, libellés textuels ou autres indicateurs. Les utilisateurs daltoniens peuvent ne pas distinguer le rouge du vert.
Attention au texte gris clair. C’est tendance mais enfreint souvent les exigences de contraste. Ce gris clair élégant sur blanc peut être illisible pour beaucoup d’utilisateurs.
Testez avec des simulateurs de daltonisme. Il existe des outils qui montrent comment votre email apparaît aux utilisateurs avec différents types de daltonisme. Ce qui vous semble évident peut leur être invisible.
Le mode sombre affecte la perception des couleurs. Si votre email prend en charge le mode sombre, testez le contraste dans les deux modes. Des couleurs qui fonctionnent sur fond clair peuvent échouer sur fond sombre.
Liens et boutons
Les éléments interactifs nécessitent une attention particulière pour l’accessibilité.
Le texte des liens doit être descriptif. « Cliquez ici » et « En savoir plus » sont vides hors contexte. Les utilisateurs de lecteurs d’écran naviguent souvent par les liens, qu’ils entendent sous forme de liste. « Télécharger le rapport annuel 2024 » est bien plus utile que « Cliquez ici ».
N’utilisez pas d’URL comme texte de lien sauf si l’URL elle-même est le sujet. « Visitez https://example.com/really/long/path/to/page » est difficile à lire et à écouter. Utilisez plutôt un texte descriptif.
Les boutons doivent ressembler à des boutons. Si quelque chose est cliquable, rendez-le visuellement évident. Ne vous fiez pas uniquement aux états de survol—les utilisateurs mobiles et ceux au clavier ne passent pas la souris.
Les zones tactiles doivent mesurer au moins 44x44 pixels. Les petits liens et boutons sont difficiles à taper avec précision, surtout pour les utilisateurs avec des handicaps moteurs.
La navigation au clavier doit fonctionner. Les utilisateurs doivent pouvoir tabuler à travers tous les éléments interactifs dans un ordre logique. Les états de focus doivent être visibles.
Contenu et langage
La façon d’écrire affecte l’accessibilité autant que le code.
Utilisez un langage simple. Des phrases courtes, des mots courants et une structure claire aident tout le monde, en particulier les personnes avec des handicaps cognitifs ou celles qui lisent dans une langue seconde.
Placez l’information importante en premier. Mettez le message clé dès le début. Les utilisateurs qui scannent ou utilisent des lecteurs d’écran bénéficient de connaître immédiatement l’essentiel.
Scindez les contenus longs. Utilisez des titres, des paragraphes courts et des puces. Les pavés de texte sont difficiles pour tout le monde et particulièrement pour les personnes dyslexiques ou ayant des difficultés d’attention.
Spécifiez la langue. Utilisez l’attribut lang sur votre élément HTML. Les lecteurs d’écran l’utilisent pour prononcer correctement le contenu. Un lecteur d’écran configuré en anglais qui prononce du texte français est déroutant.
Évitez le texte justifié. La justification complète crée des espacements irréguliers qui rendent la lecture plus difficile, surtout pour les personnes dyslexiques. Un texte aligné à gauche est plus accessible.
Tester l’accessibilité
Vous ne pouvez pas savoir si vos emails sont accessibles sans tester.
Utilisez vous-même des lecteurs d’écran. NVDA (gratuit sur Windows), VoiceOver (intégré à Mac/iOS) et TalkBack (Android) vous permettent de vivre votre email comme les utilisateurs de lecteurs d’écran. Même des tests brefs révèlent des problèmes évidents.
Les outils de test automatisés détectent certains problèmes. Des outils comme WAVE, axe et Lighthouse peuvent analyser les problèmes d’accessibilité. Ils ne détectent pas tout, mais trouvent rapidement les problèmes courants.
Testez sans images. Désactivez le chargement des images et voyez si votre email reste compréhensible. Cela simule à la fois des scénarios d’accessibilité et le comportement courant des clients email.
Testez uniquement au clavier. Pouvez-vous naviguer dans votre email sans souris ? Pouvez-vous activer tous les liens et boutons ? L’ordre de focus est-il logique ?
Testez à différents niveaux de zoom. Augmentez le zoom du navigateur à 200 % et vérifiez si votre email reste utilisable. Beaucoup d’utilisateurs malvoyants naviguent avec un zoom élevé.
Limitations des clients email
L’accessibilité des emails se heurte à des défis spécifiques liés aux limites des clients de messagerie.
Le support CSS varie énormément. Ce qui fonctionne dans les navigateurs web peut ne pas fonctionner dans Outlook ou Gmail. Testez sur plusieurs clients pour vous assurer que les fonctionnalités d’accessibilité tiennent.
Le support ARIA est limité. Les attributs ARIA avancés qui fonctionnent sur le web ne marchent souvent pas dans les clients email. Privilégiez le HTML sémantique plutôt que de compter sur ARIA.
Les éléments interactifs sont restreints. JavaScript ne fonctionne pas dans les emails. Les fonctionnalités d’accessibilité qui dépendent de scripts ne fonctionneront pas.
La gestion du mode sombre varie. Certains clients inversent les couleurs automatiquement, ce qui peut casser vos ratios de contraste soigneusement conçus. Testez le mode sombre sur différents clients.
Malgré ces limites, les fondamentaux fonctionnent partout. Structure sémantique, texte alternatif, contraste suffisant et contenu clair sont pris en charge par tous les clients email.
Mettre en place des workflows email accessibles
Une accessibilité pérenne nécessite des processus, pas uniquement des connaissances.
Intégrez l’accessibilité à vos templates email. Construisez des modèles accessibles dans vos templates de base afin que chaque email parte d’une bonne fondation.
Créez une checklist d’accessibilité. Avant l’envoi, vérifiez le texte alternatif, le contraste, le texte des liens et la structure. Faites-en une étape standard de votre processus de revue.
Formez votre équipe. Toutes les personnes impliquées dans la création d’emails—designers, rédacteurs, développeurs—doivent comprendre les bases de l’accessibilité.
Recueillez des retours. Si possible, incluez des utilisateurs en situation de handicap dans vos tests. Leurs expériences réelles révèlent des problèmes que les tests automatisés manquent.
Frequently asked questions
L'accessibilité des emails est-elle requise par la loi ?
Cela dépend de votre juridiction et du type d’organisation. Les agences gouvernementales et de nombreuses entreprises ont des obligations légales. Même sans exigence légale, l’accessibilité est une bonne pratique qui améliore l’expérience pour tous les utilisateurs.
Les lecteurs d’écran fonctionnent-ils avec les emails ?
Oui. Les utilisateurs de lecteurs d’écran accèdent aux emails via leur client ou webmail, et le lecteur d’écran lit le contenu. La qualité de l’expérience dépend de la manière dont l’email est codé de façon accessible.
Quelle est l’amélioration d’accessibilité la plus importante ?
Le texte alternatif pour les images est souvent le plus grand gain rapide. De nombreux emails contiennent des images sans texte alternatif, ce qui les rend incompréhensibles pour les utilisateurs de lecteurs d’écran. Ajouter un texte alternatif pertinent est simple et très impactant.
L’accessibilité nuit-elle au design des emails ?
Non. Le design accessible est un bon design. Un contraste suffisant, une hiérarchie claire et un texte lisible améliorent l’expérience pour tout le monde. Les emails les mieux conçus sont aussi les plus accessibles.