Accessibilité numérique : 10 actions concrètes à mettre en place dès aujourd'hui
L’accessibilité numérique n’est plus une option, c’est une obligation. Dès le 28 juin 2025, le European Accessibility Act imposera de nouvelles règles aux entreprises proposant des services numériques aux consommateurs. Pourtant, 96 % des sites les plus visités restent inaccessibles, et près de 100 % des emails HTML comportent des erreurs critiques.
Lors d’une table ronde organisée le 28 mai par Dartagnan et Warren Walter, avec les retours d’expériences de Babilou et SNCF Connect & Tech, un message fort est ressorti :
des actions simples, concrètes et accessibles à tous les métiers peuvent rapidement faire la différence.
10 actions concrètes pour rendre vos supports plus accessibles
1. Ajoutez systématiquement un texte alternatif sur les images
Le texte alternatif (attribut HTML alt) permet aux lecteurs d’écran de décrire le contenu d’une image significative. Il doit être clair, précis et utile, au-delà d’une simple description visuelle.
Exemple : Pour une bannière affichant « -30 % », préférez un texte ALT comme « Promotion : -30 % sur toute la collection été », qui informe précisément.
Envie d'en savoir plus sur Dartagnan ?
Dartagnan en quelques mots ? C'est l'outil indispensable pour vous aider à designer des campagnes innovantes et industrialiser la production de vos emails !
2. Améliorez les contrastes
Utilisez des outils comme WAVE, Contrast Checker pour vérifier la lisibilité de vos contenus et respecter les normes WCAG.
Un exemple concret ci-dessous :
Combiner beige clair et vert clair ? Mauvaise idée !
Le contraste entre ces deux couleurs est trop faible, rendant le texte difficile à lire.
Un bon contraste fait vraiment la différence !
Ici, un texte noir ou vert foncé sur un fond vert clair ou blanc offre un bien meilleur contraste.
3. Structurez vos contenus avec des titres hiérarchisés (h1 > h2 > h3)
Cette hiérarchie permet aux lecteurs d’écran de naviguer facilement et de comprendre la structure du contenu.
4. Évitez les CAPTCHA non accessibles
Les CAPTCHA traditionnels, comme ceux demandant de “glisser” et “déposer”, posent souvent de sérieux obstacles pour les personnes en situation de handicap.
Pourquoi ces CAPTCHA sont problématiques :
Troubles moteurs : difficulté à cliquer, maintenir et glisser précisément.
Troubles cognitifs : consignes complexes et surcharge d’informations visuelles.
Troubles visuels : absence d’alternative sonore ou textuelle.
Solutions : privilégiez des alternatives simples et inclusives, telles que des questions à choix multiples faciles à comprendre ou des systèmes de vérification silencieuse en arrière-plan (ex. : analyse du comportement de navigation).
Ces méthodes garantissent une meilleure expérience pour tous, sans compromettre la sécurité.
5. Indiquez la langue principale du document avec l’attribut lang="fr"
Ajouter cet attribut dans la balise <html> est essentiel pour que les lecteurs d’écran et autres technologies d’assistance prononcent correctement le contenu. Sans cette indication, ils risquent de lire le texte dans une langue incorrecte, ce qui nuit à la compréhension.
Bonne nouvelle : la solution Dartagnan intègre automatiquement cet attribut, vous garantissant ainsi une conformité simplifiée et une meilleure accessibilité de vos contenus.
6. Rendez vos formulaires explicites
Un formulaire mal conçu peut vite devenir un obstacle pour l’utilisateur, surtout lorsqu’il ne reçoit pas d’indications précises sur les erreurs à corriger.
Exemple : l’absence de messages d’erreur clairs empêche souvent de comprendre ce qui doit être corrigé, ce qui génère frustration et abandon.
Ci dessous un formulaire avec différents problèmes d’accessibilité : l’absence d’indication claire empêche d’identifier et corriger l’erreur facilement.
Solutions :
Indiquer un format de saisie attendu ;
Fournir des messages d’erreur explicites sous les champs invalides.
Exemples valides :
Adresse : 36 Rue de la Glacière, 75013, Paris.
Il manquait une virgule entre le code postal et la ville.
Date : 01/04/2025.
Il fallait remplacer les points par des barres obliques.
7. Rendez vos supports accessibles au clavier
Assurez-vous que toute votre interface puisse être utilisée uniquement avec le clavier, en testant les interactions via les touches Tab, Entrée et Échap. Cela permet aux personnes qui ne peuvent pas utiliser une souris d’accéder facilement à vos contenus.
8. Privilégiez du texte HTML plutôt que des images contenant du texte
Les emails composés uniquement d’images ne sont pas lisibles par les lecteurs d’écran et s’adaptent mal aux différentes tailles d’écran, notamment sur mobile.
Utiliser du texte HTML améliore l’accessibilité et la lisibilité.
9. Ajoutez des balises ARIA pour structurer le contenu
Les attributs ARIA (comme aria-level pour les titres ou role="table" pour les tableaux) aident les technologies d’assistance à comprendre la structure de vos contenus.
Chez Dartagnan, ces balises sont intégrées automatiquement dans les composants emails, simplifiant ainsi la création d’emails accessibles et bien structurés.
10. Formez vos équipes et testez avec les bons outils
L’accessibilité numérique est un enjeu collectif : pour réussir, il est essentiel de sensibiliser et former vos équipes (développeurs, designers, chefs de projet, marketeurs) aux bonnes pratiques.
Par ailleurs, tester régulièrement vos sites et applications avec des outils adaptés permet d’identifier rapidement les points à améliorer.
Quelques outils recommandés pour vos audits d’accessibilité :
WAVE : extension Chrome et Firefox pour analyser automatiquement les problèmes d’accessibilité web.
Accessibility Insights : outil multi-plateforme (Windows, mobile, Chrome) pour des tests approfondis et conformes aux normes WCAG.
WCAG Contrast Checker : vérifie la lisibilité des contrastes entre texte et arrière-plan selon les critères WCAG.
Google Accessibility Scanner : pour tester l’accessibilité des applications Android.
Xcode Accessibility Inspector : outil d’Apple pour auditer l’accessibilité des apps iOS.
Investir dans la formation et l’usage de ces outils vous permettra d’assurer un parcours utilisateur inclusif et conforme aux normes légales.
Bonus : les retours concrets de SNCF Connect & Tech et Babilou
Chez SNCF Connect & Tech, les avancées majeures en accessibilité :
Élimination progressive des textes intégrés aux images, notamment sur les fonds, pour éviter les informations incomplètes dans les attributs alt. Désormais, les images sont utilisées uniquement à des fins décoratives.
Chaque email fait l’objet de tests rigoureux avec des lecteurs d’écran comme VoiceOver et NVDA.
Adoption de la solution Dartagnan, qui garantit des emails accessibles dès leur conception.
Mise en œuvre de corrections concrètes : sous-titrage des vidéos, hiérarchisation claire des titres et utilisation d’un CAPTCHA accessible.
Chez Babilou, les actions clés suite à leur audit d’accessibilité :
Mise en place d’un mode contrasté sur le site pour faciliter la lecture ;
Mode non contrasté
Mode contrasté
Sous-titrage et transcription systématique des vidéos pour une accessibilité multimédia ;
Hiérarchisation claire des titres afin de structurer le contenu efficacement ;
Adaptation du CAPTCHA pour le rendre accessible à tous les utilisateurs.
Aujourd’hui, l’accessibilité est intégrée dès la phase de brief dans tous les projets marketing. L’équipe est formée à l’utilisation de contrastes optimisés, de visuels alternatifs pertinents et de libellés clairs et explicites.
Exemple d’amélioration sur un email marketing
Avant
La première version ne respecte pas les bonnes pratiques d’accessibilité :
Texte en lettres transparentes avec contour noir, difficile à lire ;
Police calligraphique centrée, compliquant la lecture rapide ;
Bouton d’action peu visible et lien avec un texte non explicite.
Après
La deuxième version suit les normes d’accessibilité :
Contrastes de couleurs optimisés pour une meilleure lisibilité ;
Taille de police adaptée pour un confort visuel ;
Interligne généreux facilitant la lecture continue ;
Texte en police sans serif, aligné à gauche pour une lecture naturelle ;
Bouton d’action clair, avec un texte de lien explicite et compréhensible.
Si vous n’êtes pas encore convaincu…
Pourquoi l’accessibilité est un enjeu critique aujourd’hui ?
101 millions de personnes en Europe vivent avec un handicap (source : Consilium)
71,5 % des ouvertures d’emails se font sur mobile, là où les erreurs d’accessibilité sont les plus fréquentes
Le non-respect des normes peut coûter jusqu’à 300 000 € d’amende cumulée
Au-delà des sanctions, un contenu inaccessible crée discrimination, frustration et perte de clients.
Pourquoi l’accessibilité est un enjeu critique aujourd’hui ?
Pour garantir une accessibilité efficace, plusieurs référentiels sont à suivre :
WCAG (W3C) : normes internationales fondamentales
RGAA (France) : déclinaison des WCAG pour services publics et entreprises
RAAM (Luxembourg) : accessibilité des applications mobiles iOS et Android
EN 301 549 (Europe) : norme européenne pour produits et services TIC
Appliquer ces normes, c’est plus qu’une obligation, c’est un levier d’inclusion et de différenciation, notamment avec l’arrivée du European Accessibility Act.
Conclusion : commencez petit, mais commencez maintenant
Vous n’êtes pas obligés d’être expert pour améliorer l’accessibilité. Mais vous avez une responsabilité.
Et surtout, vous avez des outils, des exemples, des partenaires pour avancer.
À partir du 28 juin 2025, la conformité devient obligatoire pour de nombreux secteurs (transport, téléphonie, e-commerce, services bancaires…). N’attendez pas d’être en retard.
Replay de la table ronde
Besoin d’un coup de main ?
Dartagnan vous accompagne pas à pas pour rendre vos contenus emails accessibles à tous, avec des solutions simples, efficaces et conformes aux standards.
Envie d'en savoir plus sur Dartagnan ?
Dartagnan en quelques mots ? C'est l'outil indispensable pour vous aider à designer des campagnes innovantes et industrialiser la production de vos emails !