Vous souvenez-vous de cette expérience frustrante d’ouvrir un courriel sur votre mobile et de ne pas pouvoir accéder à l’information en raison de boutons d’appel à l’action inaccessibles?
Ce sont ces mêmes expériences que vivent parfois les personnes en situation de handicap face à des contenus numériques qui ne sont pas conçus pour l'accessibilité. Or, en tant qu'outil de communication universel, le courriel se doit de respecter certains principes d'accessibilité.
C’est pourquoi aujourd’hui, l'accessibilité est directement liée à la délivrabilité des courriels. En effet, de plus en plus de filtres anti-spam et de systèmes de messagerie peuvent maintenant considérer des éléments d'accessibilité (tels qu’un format de code HTML mal paramétré, des polices de trop petite taille ou trop stylisées, un texte alternatif manquant ou des contrastes de couleur insuffisants) comme des indicateurs de spam, ce qui peut entraîner le blocage de certains courriels et impacter directement le taux d’engagement des campagnes.
Vous rencontrez d’autres types de problèmes de délivrabilité ? Découvrez ici des conseils sur les nouvelles règles de Gmail et Yahoo ici.
Cet article présente quelques exemples et bonnes pratiques pour rendre vos courriels plus accessibles.
En résumé
- L'accessibilité, qu’est ce que c’est?
- Les principes de l'accessibilité numérique
- L’application des principes d’accessibilité dans les courriels
- L'accessibilité des courriels est bien plus qu'une obligation légale. C’est une nécessité pour tous!
L'accessibilité, qu’est ce que c’est ?
Définition et principales normes d'accessibilité
L'accessibilité vise à supprimer les obstacles qui empêchent les personnes en situation de handicap de participer pleinement à la société. Il s'agit de concevoir des environnements, des services et des produits que tous les individus, quelles que soient leurs capacités physiques, sensorielles, cognitives ou intellectuelles, peuvent utiliser et apprécier.
Pour créer une société juste et équitable, le concept d'accessibilité est étroitement lié à celui de l'inclusivité. Quoique différente, l’inclusivité va bien au-delà de l'accessibilité en créant un environnement où les personnes se sentent bienvenues, valorisées et respectées. Elle consiste à favoriser une culture de l'acceptation et de la compréhension.
En numérique, les lignes directrices pour assurer l'accessibilité du contenu Web (WCAG 2) sont standardisées et développées par W3C en collaboration avec des individus et des organisations du monde entier, dans le but de fournir une norme unique commune unique répondant aux besoins des individus, des organisations et des gouvernements à travers le monde.
Chaque ligne directrice est accompagnée de critères de réussite testables, classés en trois niveaux :
A : Niveau minimum de conformité
AA : Niveau recommandé
AAA : Niveau le plus accessible
Les niveaux de conformité A et AA sont les plus couramment utilisés pour évaluer l’accessibilité du Web.
Pourquoi l'accessibilité est-elle importante?
Selon le rapport mondial de l’OMS sur le handicap, environ un milliard de personnes vivent en situation de handicap et près de 200 millions d’entre elles présentent de très grandes difficultés fonctionnelles. Dans les années à venir, le handicap deviendra une préoccupation croissante en raison de l’augmentation de sa prévalence, qui s’explique par le vieillissement des populations et le risque accru de handicap chez les personnes âgées.
Au Canada, selon le rapport ECI, 27, % des Canadiennes et des Canadiens âgés de 15 ans et plus présentent au moins une forme d’incapacité : 10,6 % de la population présente des limitations motrices, 10,9% des limitations de flexibilité, 7,4% ont des limitations visuelles et 5,6 % des limitations auditives.
Pour permettre à toutes les personnes d’accéder aux contenus en ligne malgré leurs incapacités, certaines législations ont été mises en place à l’échelle mondiale :
Principaux règlements et lois sur l’accessibilité
Plusieurs pays ont mis en place des lois et règlements pour permettre aux personnes en situation de handicap d’exercer leurs droits en vue de leur intégration scolaire, professionnelle ou sociale, et de consommer du contenu numérique selon leurs besoins.
Quelques exemples de lois et règlements :
La Loi sur l'accessibilité pour les personnes en situation de handicap du Québec, mise en place en 2004, prévoit un certain nombre de sanctions pour les organisations qui ne respectent pas ses dispositions. Ces sanctions peuvent inclure des avis d'infraction, des ordonnances de correction, des amendes et des poursuites judiciaires.
La Loi canadienne sur l'accessibilité (LCA), promulguée en 2019, prévoit des sanctions pour non conformité pouvant aller jusqu'à 250 000 $.
L’Americans with Disabilities Act (ADA), mise en place aux États-Unis en 1990, exige que les entreprises et les services en ligne soient accessibles aux personnes handicapées. L’ADA inclut des directives pour l'accessibilité des sites Web et des applications mobiles, notamment l'utilisation de technologies d'assistance telles que les lecteurs d'écran.
Le Règlement européen sur l'accessibilité (European Accessibility Act - EAA), mis en place en 2019, exige aux États membres de l’Union européenne de transposer la directive dans leur législation nationale avant le 28 juin 2022 et de la mettre en application à compter du 28 juin 2025. règlement couvre une variété de produits et services visant à permettre aux personnes handicapées d’accéder aux contenus numériques de manière autonome et efficace.
Les principes de l'accessibilité numérique
Perceptible, utilisable, compréhensible, robuste : les 4 grands principes de l’accessibilité
Quiconque souhaite utiliser le Web doit disposer d’un contenu :
L’application des principes d’accessibilité dans les courriels
Une mise en page bien structurée
1. Des titres pour hiérarchiser et faciliter la lecture du courriel
Bonnes pratiques :
- Une mise en page structurée et hiérarchisée grâce aux titres : une taille de police différente entre les titres / sous-titres / texte paragraphe qui crée une distribution de l’information au fur et à mesure de la lecture, évitant ainsi une surcharge cognitive;
- Des titres concis et clairs;
- Des titres qui servent de point d’ancrage et qui facilitent la lecture.
2. L'efficacité des mises en page à une colonne
Bonnes pratiques :
- Le contenu est présenté sur une colonne, ce qui facilite la lecture et offre une meilleure visibilité des informations du courriel;
- L'œil de l’utilisateur est guidé à travers les informations clés du courriel (titres, images produits, boutons d’appel à l’action), contrairement à une mise en page sur plusieurs colonnes qui pourrait sembler plus complexe et créer une surcharge cognitive;
- La mise en page sur une colonne facilite aussi la navigation des lecteurs d’écran à travers le courriel.
Un texte compréhensible et lisible
1. Un texte et une typographie clairs et faciles à lire
Bonnes pratiques :
- Le vocabulaire utilisé est simple et il permet de comprendre facilement le sujet soulevé;
- Même si le texte peut paraître un peu long; celui-ci est clair et concis, se limitant aux informations clés;
- La syntaxe est efficace et résume parfaitement le sujet de l’article où l’utilisateur sera redirigé;
- La typographie est simple et facile à déchiffrer (ni trop grasse, ni trop fine, ni trop stylisée);
- La hauteur de ligne et la taille de la police ne complexifient pas la lecture;
- Le texte est aligné à gauche.
Astuce en plus :
- Pour assurer le bon affichage du texte sur toutes les plateformes de messagerie, utilisez une police web de secours paramétrée. Pour vous aider à la sélectionner, il existe des outils pratiques tels que Google Font.
Une interface intuitive facilitant la navigation
1. Une navigation fluide dans les courriels, même avec un clavier
- La navigation entre les différents éléments du courriel peut se faire à l'aide de la touche 'Tab' et les touches fléchées;
- Un focus clavier visible et clair met en évidence les éléments survolés, comme les boutons d’appel à l’action). Appliquez des styles CSS pour indiquer le focus clavier (bordure, soulignement) et pour signaler les éléments actifs, comme dans l’exemple ci-dessous :
2. Concevoir des boutons intuitifs
Bonnes pratiques :
- Le bouton est en format bouton, et non en image, ce qui permet son affichage lorsque les images sont bloquées;
- L’utilisation de marges entre le bouton et les autres éléments du courriel facilite le repérage du bouton;
- Lacouleur dubouton offre un bon contraste avec la couleur dufond (p. ex. noir sur orange), et le texte du bouton contraste bien avec la couleur du bouton (p. ex. blanc sur noir);
- Le texte du bouton est simple et explicite (p. ex. ‘’« Inscris-toi dès maintenant »’ au lieu de « En savoir plus
- Le lien hypertexte est souligné et accompagné d’un repère visuel « > », indiquant qu’il est cliquable.
3. Assurer l’adaptabilité sur les différents appareils : ordinateurs, téléphones mobiles, etc.
Version ordinateur
Version mobile
Bonnes pratiques :
- Le courriel s’adapte correctement et offre la même expérience sur ordinateur et mobile;
- Il n’y a pas de pertes d’informations, le bouton d’appel est accessible, la mise en page s’adapte, le texte et la hiérarchisation de l’information ne sont pas altérés.
Astuce en plus :
- Testez chaque courriel en réalisant des envois tests sur différentes adresses courriels et appareils ou utiliser des outils de tests de courriels, tels que Litmus ou EmailsOnAcid, pour gagner en efficacité.
Des contenus optimisés pour les assistances technologiques et le chargement de courriels
Exemple de lecture d’un courriel par assistance vocale
Courriel initial
Lecture du courriel par assistance vocale
1. Un texte alternatif descriptif pour tous les contenus non textuels
Bonnes pratiques :
- Toutes les images comportent un texte alternatif;
- Le texte alternatif donne autant d'informations que l’image bloquée et permet de comprendre facilement les renseignements partagés dans l’image.
2. Optimiser les images pour le chargement des courriels et diminuer le risque qu’ils soient tronqués sur Gmail
Mauvaises pratiques :
- Le poids du courriel dépasse 102 Ko et est tronqué sur Gmail;
- Le temps de chargement des images est prolongé;
- L’utilisateur doit effectuer un clic supplémentaire pour voir l’intégralité du courriel.
Astuces en plus :
- Utilisez le format JPG pour les photos et les images en général;
- Utilisez le format PNG pour les illustrations et les images sur un fond transparent;
- Utilisez les formats GIF et APNG pour les animations;
- Utilisez des outils tels que JPEGmini (payant), TinyPNG ou iloveimg pour réduire le poids des images sans en compromettre la qualité.
Des contrastes de couleur forts et une palette adaptée aux déficiences visuelles
1. Une palette adaptée aux déficiences visuelles
Exemple de couleurs perçues selon les déficiences visuelles :
Mauvaises pratiques :
- Le courriel utilise une large palette de couleurs, ce qui pourrait rendre la lecture plus difficile pour les personnes ayant une déficience visuelle;
- Tous les titres, textes et boutons d’appel à l’action sont en couleur, et de couleur différente, ce qui peut compliquer la lecture et nuireà la bonne compréhension des informations..
Astuces en plus :
Testez vos courriels sur un outil tel que Litmus pour vous assurer que les couleurs utilisées ne complexifient pas la lecture pour les personnes ayant une déficience visuelle.
2. Un fort contraste de couleur entre les différents éléments du courriel
Mauvaises pratiques :
- La couleur du titre (rose) et la couleur de fond (blanc) ne contrastent pas assez, rendant plus difficile la lecture du courriel;
- La couleur du texte ne contraste pas suffisamment avec la couleur du dernier bouton d’appel à l’action (blanc sur rose), rendant le texte peu visible et en complexifiant la lecture.
Résultat de l’outil test démontrant que le contraste entre les deux couleurs ne répond pas au niveau de conformité AA (niveau recommandé)
Astuce en plus :
Testez les couleurs utilisées dans le courriel avec des outils comme accessible-colors.com
Un code HTML structuré et enrichi
1. Structurer et ordonner le code HTML du courriel
Quelques exemples d’éléments du code HTML qui favorisent l’accessibilité :
- Assurez-vous que les éléments HTML sont complets, qu'ils commencent par une balise d'ouverture <> et qu’ils se terminent par une balise de fermeture </>;
- Vérifiez également que les éléments HTML ne contiennent pas d’attributs en double;
- Si vous utilisez un module d’extension (plugin) ou un élément créé par un tiers, assurez-vous qu'il utilise un balisage HTML valide;
- Les codes de langue HTML doivent correspondre aux codes de langue ISO pour assurer une interprétation correcte par les technologies d'assistance;
- Structurez votre courriel de manière logique en utilisant des balises sémantiques, telles que <H1>, <H2>, <H3> pour les titres et <p> pour les paragraphes;
- Évitez de spécifier l'attribut ‘title’aux liens, car cela complexifie la lecture pour les lecteurs d’écran;
- Séparez le contenu en utilisant des sous-titres pour chaque nouvelle section et marquez les en-têtes avec des balises HTML <header>.
L'accessibilité des courriels est bien plus qu'une obligation légale. C’est une nécessité pour tous!
Dans les années à venir, et avec l’évolution de la technologie, offrir des contenus numériques accessibles sera d’une importance capitale pour permettre aux personnes en situation de handicap de répondre à leurs besoins quotidiens de façon autonome, tels que régler des factures en ligne, rester informer, prendre des rendez-vous médicaux, etc.
Pour les courriels, cet article constitue un bon point de départ pour envisager des axes d’amélioration qui demandent parfois peu d’effort et qui peuvent avoir un impact significatif sur l’expérience des personnes en situation de handicap.
Si vous souhaitez obtenir plus d’informations sur l'accessibilité des courriels, n'hésitez pas à nous contacter.
Sources
- Standards et guideline WCAG 2
- Association W3C
- Guide d’accessibilité - Behance
- Litmus
- Association Canadienne des centres de science
- Nation Unies droits de l’Homme
- Passe muraille
- Microsoft
