Aussi malheureux et choquant que cela puisse paraître, l’accessibilité reste un concept nouveau dans le web et l’email. La bonne nouvelle, c’est que des entreprises telles qu’Accessibe en font leur mission et ont pour objectif de rendre le web accessible d’ici 2025. La mauvaise, c’est que ça prouve que l’accessibilité reste un concept trop compliqué et trop mal maîtrisé pour être intégré dans nos pratiques et doit être délégué à une entreprise tierce.
L’accessibilité, c’est en option ?
Premièrement, les personnes concernées par des problèmes d’accessibilité sont plus nombreuses qu’il n’y paraît. D’après l’OMS, près d’un milliard de personnes (oui oui, plus d’une personne sur 10 !) sont atteintes d’une déficience visuelle.
Deuxièmement, ne pas proposer une version accessible de ses emails a un impact critique : l’impossibilité pour certaines personnes d’utiliser l’information qu’ils contiennent. En termes d’usabilité, c’est donc bien plus gênant qu’un email qui n’est pas responsive au pixel près, même si c’est pas terrible non plus.
Si on met en perspective les deux points précédents avec le temps et l’effort qu’on passe à optimiser nos emails simplement pour qu’ils soient jolis sur Outlook.com, qui représente bien moins de 1% du marché, y a un truc qui cloche.
Et si l’argument éthique ne suffit pas, le calcul fonctionne aussi d’un point de vue business. Ne pas rendre vos emails accessibles, c’est aussi vous priver d’une audience significative.
Et si vraiment, vous n’avez ni morale ni intérêt commercial (généralement vous avez quand même au moins un des deux), alors sachez que des lois sont en train d’être mises en place pour rendre l’accessibilité obligatoire.
L’accessibilité, si dur que ça ?
Super, vous êtes toujours là donc a priori je vous ai convaincu. Alors comment on fait ? Quand on parle d’accessibilité, on peut généralement découper le problème en 3 catégories.
Il y a tout un tas de trucs qu’on peut améliorer mais je vais me concentrer ici sur les pratiques les plus faciles à mettre en place pour optimiser l’accessibilité de vos emails. N’hésitez pas à commenter pour partager les astuces que vous auriez voulu voir ici !
Le contenu
En général, votre email est construit autour d’un contenu à partager. On peut (doit) s’assurer que ce contenu est accessible en vérifiant notamment que :
- Le sujet et les liens sont descriptifs (on évite les “cliquez ici” ou “ouvrez-moi) : les personnes qui ont recours à une liseuse peuvent ainsi facilement savoir à quoi s’attendre
- Le contenu est textuel : les images ne comportent pas d’information importante, et sont toutes accompagnées d’un texte alternatif (l’attribut “alt”). Et on y va mollo sur les gifs (à prononcer jif, bien sûr)
- Chaque paragraphe traite d’un sujet particulier et reste court : ceci est non seulement important pour les personnes ayant recours à une liseuse (ben oui, eux ne peuvent pas lire en diagonale et vont devoir se farcir tout le texte), mais aussi pour les personnes atteintes de dyslexie ou autre trouble de l’apprentissage
- Le contenu est facile d’accès : on évite les tournures de phrases alambiquées au profit de mots simples
Le design
Maintenant qu’on a le contenu parfait, on va vouloir le rendre beau comme tout. Oui, mais c’est là que ça se gâte ! Point de vue design, on va faire attention à :
- Privilégier un sens de lecture logique : de gauche à droite et de haut en bas. À moins de créer un email pour Arlequin, on se passera du design en patchwork
- Choisir des polices suffisamment épaisses et dans une taille suffisamment grande (supérieure à 14px) : facile maintenant que vous avez raccourci votre contenu ! On n’oublie pas non plus d’augmenter la line-height pour que le contenu respire et soit facilement lisible
- Éviter les paragraphes centrés et justifiés : privilégiez le sens naturel de lecture (de gauche à droite ou droite à gauche selon la langue) et l’espace naturel entre les mots, déformé par la justification du texte
- Proposer un contraste fort : point bonus, ceci servira tous vos utilisateurs puisqu’un contraste trop faible rend la lisibilité difficile en fonction des conditions d’éclairage. On pense aussi au “dark mode” introduit sur un nombre grandissant de clients et navigateurs
- Rendre ses liens et boutons faciles d’accès : on s’assure que les liens sont soulignés et colorés avec un contraste suffisant, et qu’ils sont faciles à cliquer ou toucher. À l’inverse, on évite de colorer et souligner un texte qui n’est pas un lien
Le code
Okay, on a le contenu, le design, on peut maintenant passer à l’implémentation. Pour pas gâcher tout le travail de nos copains les rédacteurs et designers, on va s’assurer de :
- Respecter la sémantique HTML : les paragraphes viennent en bandes organisées et sont précédés de titres descriptifs. On fait donc bon usage des balises
<p>
et<h*>
notamment. - Définir la langue de son email avec l’attribut
lang
: très facile à mettre en place, ceci va permettre aux liseuses de prononcer le contenu correctement, véri youzfoul - Inclure l’attribut
role=presentation
sur le tag HTMLtable
: ceci permet aux liseuses de comprendre qu’il s’agit d’un élément de présentation et non d’un tableau de données, raison d’être initiale de ce tag ennemi numéro des développeurs d’email - Proposer une version texte : et oui, comme encore trop d’emails sont envoyés sans respecter toutes ces bonnes pratiques, de nombreux utilisateurs préfèrent la version texte. Vous devriez être capables de générer celle-ci automatiquement depuis votre plateforme d’envoi, donc aucune excuse pour ne pas le faire !
Les outils pour passer à l’action
Ça y est, tu es arrivé jusqu’ici donc on peut se tutoyer. Alors oui, oui, je sais, on est tous super occupés et ça fait une chose de plus à vérifier alors que tu passes déjà un temps fou à tester tes mails sur Lotus Notes. Fort heureusement, there’s an app for that.
À vrai dire, il y a beaucoup d’outils qui permettent de tester tout un tas de choses : lisibilité, sémantique, etc. Bien que ces outils fassent très bien leur job, essayer de les intégrer dans son processus est trop manuel et chronophage et se limite donc souvent à une bonne résolution (que tu ne tiendras donc pas, j’te connais).
Je recommande donc plutôt https://www.accessible-email.org/ pour démarrer. Cet outil analyse un fichier HTML et renvoie les erreurs et choses à améliorer pour rendre l’email accessible. C’est donc super facile à intégrer à un workflow, tant pour vérifier son email avant l’envoi que pour mettre en place les bonnes pratiques.
Si tu souhaites en apprendre plus, que ce soit parce que le sujet t’intéresses ou par crainte d’être remplacé par une machine comme accessible-email, je recommande les checklists WCAG disponibles sur https://www.wuhcag.com/wcag-checklist/. Ces checklists sont organisés en niveau (débutant, intermédiaire, avancé) et sont un super moyen de monter en compétences au fur et à mesure qu’on les utilise.
J’espère que cet article t’aidera à faire de l’accessibilité une priorité et t’auras permis de réaliser que c’est important d’une part, et pas si dur à mettre en place d’autre part !