Diagnostic d’accessibilité des emails : Cas pratique avec WWF

WWF est client de Badsender depuis 2021. Récemment, nous leur avons proposé de diagnostiquer l’accessibilité de leurs emails et de mettre à jour leur template HTML en fonction des résultats obtenus. Depuis 4 ans, nous les avons accompagnés dans le choix et la migration vers la plateforme Selligent/Marigold, ainsi que dans leur production d’emails via l’email builder LePatron. Notre expertise couvre désormais la rédaction d’emails de marketing automation et de newsletters, la création d’un preference center, et les questions de délivrabilité. En résumé, nous sommes leur référent pour tout ce qui concerne l’emailing et le CRM.

Comment avons-nous procédé ?

Nous avons analysé deux emails créés avec l’email builder LePatron et diffusés via la plateforme Selligent. Ces emails ont été évalués selon notre grille d’analyse comprenant 57 critères d’accessibilité.

Email type Newsletter

Email type Produit

Les principaux résultats du diagnostic accessibilité des emails de WWF

• L’email « Newsletter » a obtenu 27 règles respectées sur 57.
• L’email « Produit » a obtenu 29 règles respectées sur 57.

Pour chaque email, la grille est remplie et une synthèse globale est réalisée pour plus de clarté.

L’analyse des deux emails met en évidence des anomalies récurrentes qui ont été rassemblées dans un document de synthèse et hiérarchisées selon leur importance : critique, moyenne ou faible. Cette organisation permet d’identifier d’un seul coup d’œil la feuille de route à suivre.

Vous trouverez ci-dessous une sélection de critères représentatifs. Nous ne pouvons détailler l’intégralité des 57 critères évalués, nous avons donc choisi les plus pertinents issus de notre travail avec WWF 😉

Certains textes ne sont pas en HTML mais en images

• Importance : Critique
• Catégorie : Présentation de l’information
• Responsable : Studio Design, Rédacteurs
• Objectif : Que chaque contenu textuel puisse être parcouru et lu facilement par un lecteur d’écran. Assurer l’accessibilité de l’information même si les images sont désactivées. En particulier les titres et les boutons

C’est l’une des erreurs les plus fréquentes que nous observons dans nos diagnostics.

La structure HTML manque souvent de sémantique

• Importance : Critique
• Thématique : Structuration de l’information
• Responsable : Équipe technique, Rédacteurs
• Objectif : Permettre aux lecteurs d’écran de distinguer la hiérarchisation des textes : titres, sous-titres, paragraphes, listes à puces…

En supprimant le style (CSS) nous constatons bien que le document HTML n’a aucune structure de titres et donc aucune hiérarchie de l’information : les titres sont de simple paragraphes👇

Voici ce que l’email aurait dû rendre en ajoutant les balises sémantiques dans le code HTML 👇

Les contrastes de couleurs s’avèrent fréquemment insuffisants

• Importance : Critique
• Thématique : Couleurs
• Responsable : Studio Design
• Objectif : Optimiser la lisibilité des textes en respectant un contraste suffisant entre les éléments de premier et d’arrière-plan. Viser un ratio d’au moins 4,5:1 pour le texte standard et 3:1 pour le texte de grande taille, conformément aux Règles pour l’accessibilité des contenus web (WCAG).

C’est l’une des erreurs majeures que nous observons le plus fréquemment dans nos diagnostics accessibilité email. Ce point soulève souvent des débats concernant la charte graphique. En effet, les couleurs utilisées font pourtant partie de la charte graphique qui, en principe, aurait dû être conçue en tenant compte des critères d’accessibilité, « en principe ».

Cela met en tension les décisions esthétiques prises par un petit groupe de personnes et la réalité objective des mesures de contraste requises pour l’accessibilité.

La balise <title> n’est pas correctement renseignée

• Importance : Moyenne
• Thématique : Éléments obligatoires
• Responsable : Équipe technique
• Objectif : C’est le titre de votre document HTML, il doit être présent pour que le document soit valide. Dans le cas où la version en ligne de l’email serait consultée, l’onglet du navigateur propose un titre pertinent, le title. Il s’affiche dans l’onglet, permettant aux utilisateurs de visualiser rapidement la page et offrant aux utilisateurs de lecteurs d’écran une introduction rapide à la page.

Les images ne disposent pas systématiquement d’alternatives textuelles appropriées

• Importance : Moyenne
• Thématique : Images
• Responsable : Rédacteurs
• Objectif : Fournir une alternative textuelle pouvant être lue par un lecteur d’écran sur les visuels utiles. Ne pas en fournir sur les visuels décoratifs.

C’est également une erreur fréquente. Il reste à déterminer quelles images sont considérées comme utiles ou décoratives. Cela peut sembler simple à première vue, mais des débats peuvent parfois surgir sur cette question.

Certains textes (titres) sont en TOUT MAJUSCULE

• Importance : Moyenne
• Thématique : Présentation de l’information
• Responsable : Studio design, rédacteurs
• Objectif : Les lecteurs d’écran ne distinguent pas très bien les majuscules des abréviations.

Une erreur courante que nous constatons dans nos diagnostics : des titres, parfois de plus de 2 à 3 lignes, entièrement en majuscules. Si vous souhaitez tout de même mettre un titre court en majuscule, faite le en appliquant un style (CSS) et non en le saisissant au clavier.

Et bien d’autres critères évalués :

• La typographie n’est pas toujours adaptée aux besoins des utilisateurs malvoyants.
• Éviter les textes entièrement en majuscules
• La rédaction de CTA / bouton d’action (CTA : Call To Action) manque parfois de clarté et génère des liens non explicite (exemple : en savoir plus, cliquez ici)
• Le sens de lecture
• …

Une fois les diagnostics accesibilité email faits, que fait-on ?

Trois axes d’amélioration principaux ont été identifiés :

1. Optimisation technique du template
2. Mise en place d’une méthodologie de production
3. Formation des équipes

Optimisation technique du template

Une révision du code HTML s’est avérée nécessaire pour renforcer la sémantique, améliorer la gestion des attributs de langue et assurer une meilleure compatibilité avec les lecteurs d’écran. Le template HTML de WWF implémenté dans l’email builder LePatron a donc été optimisé dans ce sens.

Plusieurs points d’accessibilités ont été corrigés :

• La balise title
• La déclaration de langue
• Le balisage sémantique
• La présence d’au moins un titre de premier niveau (h1)
• L’ajout d’une option « level » sur les blocs ou éléments ayant des titres pour garantir l’utilisation de la balise sémantique appropriée dans le code HTML.

Mise en place d’une méthodologie de production

La mise en place de processus systématiques pour la gestion des contenus accessibles (alternatives textuelles, contraste des couleurs, hiérarchie des contenus) permettra d’améliorer significativement la qualité des emails. Les équipes ont accès à la grille d’analyse et peuvent s’y référer comme un checklist. De plus le document restitué contient une liste d’outils et ressources en ligne afin de pouvoir réaliser des contrôles poussés si besoin.

Formation des équipes

Un programme de sensibilisation et de formation aux bonnes pratiques d’accessibilité numérique et email renforcera les compétences des équipes de production et garantira une meilleure prise en compte de ces enjeux au quotidien.

Ces améliorations permettront à WWF de tendre vers une conformité avec les obligations légales tout en offrant une meilleure expérience utilisateur à l’ensemble de leurs destinataires.

Conclusion

L’avantage majeur de ce diagnostic est qu’il génère une feuille de route claire des anomalies à corriger, organisée par ordre de priorité. Il identifie précisément quelle équipe doit intervenir pour chaque correction. Cette approche s’avère à la fois rapide et particulièrement efficace. N’hésitez pas à nous contacter si vous souhaitez bénéficier d’un tel diagnostic !