Au moins 2.2 milliards de personnes à travers le monde vivent avec une forme de déficience visuelle. L’accessibilité dans l’email est donc logiquement devenue depuis quelques années un critère technique important : Il faut pouvoir proposer aux destinataires d’une campagne email souffrants de déficience visuelle la meilleure expérience possible à travers les lecteurs d’écran. Ce n’est pas juste une tendance, mais bien un devoir !
Mais alors, quels changements cela demande sur nos techniques de développement ? Quels sont les bonnes pratiques à adopter en terme de code pour garantir une lecture du contenu optimale par les lecteurs d’écran ? Cela va-t-il aussi impliquer des modifications sur le design ? Car c’est bien aux designers et développeurs email que revient la tâche d’améliorer l’expérience de la lecture auditive de l’email…
Les handicaps
Ils sont nombreux, et ne se limitent pas aux déficiences visuelles : dyslexie, épilepsie, mal-voyant, malentendant, daltonien… On peut distinguer les handicaps selon qu’ils soient permanents (non-voyant), temporaires (bras cassé : comment zoomer un texte ou scroller aussi facilement sur mobile), ou contextuels (en voiture, lunettes manquantes, vitesse internet lente, utilisation d’un téléphone au soleil). Handicaps : auditif, cognitif, neurologique, physique, parole, visuel. Les personnes handicapées comptent sur un contenu accessible pour lire leur emails, effectuer des achats, interagir avec le web. Certains utilisent des lecteurs d’écran ou d’autres dispositifs d’assistance.
Les appareils
Les lecteurs d’écran : lisent étape par étape, ce qui change de nos habitudes de consultation. Ce n’est pas une visualisation rapide, mais bien les éléments les uns après les autres qui seront analysés. Beaucoup de gestionnaires de campagne passent beaucoup de temps à s’inquiéter des clients de messagerie avec 1% d’utilisation (de part de marché). Ou à vouloir avoir un rendu identique au pixel près sur tous les environnements d’ouverture. L’accessibilité est un problème plus important.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Pourquoi s’en soucier ?
- Parce que cela représente sans doute un bon nombre de vos destinataires quand on connaît le nombre de personnes souffrant d’un handicap, quel qu’il soit, à travers le monde. Si 10% de votre liste de diffusion ne peut “consommer” vos emails, vous perdez autant de clients potentiels; 10% d’abonnés en moins. 10% de prospects en moins. 10% de ventes en moins.
- Parce que si vous ne vous en souciez pas, vous offrez une mauvaise expérience et vous créez de la frustration. Et si il y a frustration, vous perdez des clients potentiels.
- Pour délivrer une expérience pertinente, la meilleure possible.
- Parce qu’il y a quelques années, Internet n’était pas accessible aux personnes souffrant de certains handicaps; Mais les choses évoluent, les technologies aussi. Certaines plateformes deviennent plus inclusives. Il faut savoir aller en ce sens.
- Parce qu’à une époque où presque tout se fait en ligne (des opérations bancaires, à la commande d’article, la communication, l’apprentissage) c’est essentiel.
- Pour minimiser les risques juridiques.
- Pour vous différencier de vos concurrents.
- Pour améliorer votre image de marque.
- Parce que certaines industries doivent encore plus respecter la loi : soins de santé, industrie hôtelière, organisations gouvernementales, finance…
Que faire ?
Contraste, taille des textes, des call to action, textes alternatifs, <table> et l’attribut HTML role, utilisation de balises sémantiques… Autant de sujets et thèmes techniques que nous avons déjà détaillés dans un article sur l’accessibilité et l’emailing et que nous avons abordés dans cette vidéo dédiée au sujet du design et du développement d’emails accessibles !
Sources
- https://emails.hteumeuleu.fr/2018/01/laccessibilite-des-e?mails-par-lexemple/
- https://iterable.com/activate/_schedule/impactful-email-experiences-through-inclusivity-and-accessibility-2/
- https://a11y-guidelines.orange.com/fr/contenu-et-communication/emails/
- https://www.badsender.com/2019/01/23/accessibilite-emails/
- https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/
- https://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-email-accessibility–cms-31240
- https://www.litmus.com/blog/ultimate-guide-accessible-emails
- https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
- https://ludotic.com/quelle-taille-boutons-sur-une-interface-tactile/
- https://www.csun.edu/sites/default/files/email_accessibility.pdf
- https://github.com/wilbertheinen/accessible-email-documentation
- https://fr.slideshare.net/paulairy/accessibility-in-action-the-challenges-and-opportunities-of-implementation/84
- https://www.campaignmonitor.com/resources/guides/accessibility/
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/
- https://webaim.org/techniques/images/#seizures
- https://www.who.int/news-room/fact-sheets/detail/disability-and-health
- https://a11yphant.com/
- https://mailchimp.com/resources/accessibility-in-email-marketing/
- https://styleguide.mailchimp.com/writing-for-accessibility/?_ga=2.52516971.297993554.1655968602-93333043.1655765812
- https://litmus.com/builder/bbcac39
- https://litmus.com/builder/af97b12
- https://www.24a11y.com/2018/accessibility-and-inclusion-with-email/
- https://onlyinfluencers.com/email-marketing-blog-posts/best-practice-email-strategy/entry/the-difference-between-accessibility-and-inclusion-in-email-marketing
- https://media.emailonacid.com/wp-content/uploads/2018/03/EOA_Accessibility_Infographic.pdf
Outils
- https://github.com/Orange-OpenSource/font-accessible-dfa
- https://colororacle.org/
- https://caniuse.email/
- https://www.accessible-email.org/
- https://www.caniemail.com/
- https://infohound.net/tidy/
- https://www.10bestdesign.com/dirtymarkup/
- https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
- https://webaim.org/resources/contrastchecker/
- https://support.microsoft.com/fr-fr/office/obtenir-la-lisibilité-et-les-statistiques-de-niveau-de-votre-document-85b4969e-e80a-4777-8dd3-f7fc3c8b3fd2?redirectsourcepath=%252fen-us%252farticle%252ftest-your-document-s-readability-0adc0e9a-b3fb-4bde-85f4-c9e88926c6aa
- https://www.emailonacid.com/email-accessibility/
- https://www.freedomscientific.com/Products/software/JAWS/
- https://unspam.email/
- https://www.figma.com/community/tag/a11y/plugins
- https://www.litmus.com/blog/how-to-create-an-accessibility-switcher-in-email/
- https://litmus.com/community/discussions/8139-how-we-adapted-paul-airy-s-accessibility-switcher-for-litmus-newsletter
- https://parcel.io/docs/dev-tools/accessibility-checker
Les participants
Thomas Defossez : Thomas a rejoint l’équipe de Badsender en 2017 en tant que Lead Designer Email et Développeur Email. Depuis, il divise logiquement son temps entre des design de template email et des intégrations HTML. Il est passionné par le code HTML pour l’email et les innovations. L’accessibilité dans l’email, il en parle depuis 2018, et il cherche constamment à peaufiner ses méthodes de codage.
Jonathan Loriaux : Actif depuis plus de dix ans dans l’emailing, il a commencé côté technique (intégration de campagnes emailing) avant de s’orienter vers la vente (en tant qu’expert eCRM) et enfin le conseil marketing. Depuis 9 ans il est l’auteur du blog Badsender.com. L’emailing n’est pas seulement une expertise, c’est véritablement devenu sa passion, c’est pourquoi Badsender est maintenant son activité principale avec la création d’une activité de consultant emailing liée au site.
