Améliorer l'accessibilité des emails

Bien qu’en constante évolution, l’email ne permet pas encore de respecter parfaitement les normes d'accessibilité web.

Pour être compatibles avec les clients emails plus anciens ou ceux qui ne suivent pas les standards actuels du HTML et CSS, nous devons utiliser des tableaux HTML (<table>) pour la mise en page. Bien qu’ancienne, cette pratique est nécessaire pour assurer une meilleure compatibilité à travers différents clients mails.

Néanmoins, l’Email Builder est résolument engagé dans la mission de rendre l’email et le web plus accessibles et inclusifs. Voici quelques-unes des mesures que nous avons mises en place pour vous aider à améliorer l'expérience de tous vos lecteurs.

l’Email Builder détecte automatiquement la langue de votre email et l'ajoute dans le code de l'email généré.

Cette fonctionnalité aide les technologies d'assistance (ex: synthèse vocale) à mieux interpréter le contenu.

Vous verrez apparaître de nouveaux attributs lang et xml:lang au début de votre email indiquant la langue détectée :

Pour en savoir plus, retrouvez des informations complémentaires sur le site du w3c.

Les titres structurés (h1, h2, etc.) sont recommandés par les Web Content Accessibility Guidelines (WCAG) pour améliorer la navigation dans les documents.

Ils sont malheureusement délicats à utiliser dans l’email, car ils génèrent souvent  des incohérences visuelles.

Dans l’email, nous utilisons donc des attributs role="heading" et aria-level, permettant de ne pas impacter visuellement votre email tout en maximisant l’accessibilité.

Dans le Designer, sélectionnez votre élément texte puis définissez son niveau de titre à l’aide du champ prévu à cet effet.

Pour aller plus loin, retrouvez des informations complémentaires sur le site du w3c.

La possibilité de naviguer dans les emails à l’aide du clavier est un aspect crucial de l'accessibilité. Nous générons le code nécessaire pour que les utilisateurs qui le souhaitent puissent disposer de retour visuel à la navigation clavier, sans pour autant dégrader l’expérience des utilisateurs à la souris.

Lorsque vous utilisez la navigation au clavier, nous affichons un cadre violet sur les éléments cliquables.

Pour comprendre la navigation au clavier, nous vous recommandons la lecture de ces deux articles :

• Article W3C
• Article Webaim

Par l’utilisation d’attributs comme aria-hidden="true" ou role="presentation" nous indiquons aux technologies d'assistance les éléments à ignorer, car ils ne contribuent pas au sens du message.

Cette pratique, conforme aux bonnes pratiques d'accessibilité pour les applications web peut être transposée aux emails :

Pour en savoir plus, retrouvez des informations complémentaires sur le site de Mozilla.

L'utilisation prudente de l'attribut target="_blank" est conseillée afin d’éviter de désorienter les utilisateurs, conformément aux recommandations du WCAG.

Une utilisation judicieuse serait de réserver cette fonctionnalité aux liens sortants de votre environnement (par exemple: liens vers les réseaux sociaux, liens vers un autre site…).

L'accessibilité est un domaine en constante évolution, et bien que nous ne puissions pas encore tout automatiser, il est crucial que vous participiez activement à cette démarche en comprenant et en utilisant les outils à votre disposition sur notre plateforme.

L'amélioration de l'accessibilité est un processus continu, et nous nous engageons à poursuivre la mise à jour de notre plateforme pour rendre le web toujours plus inclusif.

Et ce n’est pas tout. L’accessibilité est aussi une question de design et de mise en forme. Consultez notre article de blog sur l'accessibilité des emails.