On parle de plus en plus d’accessibilité dans les e‑mails ces dernières années, et c’est une très bonne chose. Mais je tombe toujours régulièrement sur plein d’e‑mails peu accessibles. En donnant des formations ou des conférences, je me suis rendu compte que montrer, et pas seulement expliquer, la différence que peut faire un e‑mail accessible était un excellent moyen pour sensibiliser des gens au sujet. Voici quatre conseils pour améliorer l’accessibilité dans l’intégration d’e‑mails, illustrés par des vidéos.
1. Toujours préciser l’attribut alt.
L’attribut alt de l’élément img est obligatoire depuis HTML 4. Cela signifie que chaque image d’un e‑mail doit avoir un attribut alt, même si celui-ci est vide (alt="").
Le cas échéant, un lecteur d’écran comme VoiceOver va lire à haute voix le nom complet du fichier de l’image. Voici l’exemple d’un e‑mail de LEGO (dont voici le code).
Dans cet e‑mail, plein d’images n’ont pas du tout d’attribut alt. Par exemple, voici le code d’une des images du header de cet e‑mail.
<img src="…/n_sah_h3.gif" height="33" width="191" style="display:block;border:0;" />À cause de l’absence d’attribut alt, VoiceOver lit tout haut le nom du fichier (n_sah_h3.gif). (VoiceOver est totalement #TeamGif, cela dit au passage.) Ce n’est pas très utile. Et imaginez à quel point ça peut être pénible si votre image est une suite de caractères générés aléatoirement.
Heureusement, cela peut être corrigé en ajoutant l’attribut alt, vide ou contenant le texte correspondant à l’image. Voici une vidéo de l’exemple précédent amélioré.
Cependant, il faut être prudent avec l’attribut alt. Si une image a un alt vide avec un lien autour, VoiceOver va lire la dernière partie de l’URL.
Voici l’exemple d’un e‑mail de Spotify (dont voici le code), partagé par Alex Kelly.
Bien que cet e‑mail soit principalement composé de texte personnalisé, il a été généré complètement avec des images. L’e‑mail dans son ensemble est cliquable. Mais chaque image a un attribut alt vide. Un bon moyen d’éviter ce comportement est d’ajouter la bonne alternative textuelle.
2. Utiliser un texte alternatif pertinent.
Avoir un attribut alt, c’est bien. Mais s’assurer que son contenu est pertinent, c’est mieux.
Voici l’exemple d’un e‑mail de Deliveroo (et son code), partagé par Email Chic Geek.
« 600px WIDE IMAGE »
C’est le texte alternatif pour l’image principale de cet e‑mail, qui inclut à la fois la photographie et le texte du titre. Ça n’est vraiment pas utile du tout. Voici le même e‑mail, avec une alternative textuelle appropriée.
L’an dernier, j’ai partagé un exemple beaucoup plus inquiétant venant d’American Eagle Outfitters (dont voici le code).
A worrying practice in email design : using "Turn your images on" for every alt attributes. DON'T EVER DO THAT. pic.twitter.com/ZBg0pwnwKn
— HTeuMeuLeu (@HTeuMeuLeu) June 1, 2017
Tous les texte alternatifs de cet e-mail disent « Turn your images on. Shop AEO » (« Activez vos images. Achetez chez AEO »). C’est terriblement horrible. Les gens qui ont le plus besoin des textes alternatifs n’ont pas la possibilité « d’activer » leur vue comme par magie.
Une bonne pratique, en général, est d’inclure dans l’attribut alt le texte qui peut être présent dans l’image. S’il n’y a pas de texte, alors c’est à vous de décider si l’image représente un contenu important et si vous devez la décrire ou pas.
3. Utiliser role="presentation" sur les tableaux.
En HTML, les tableaux ne sont pas fait pour faire de la mise en page. On a appris cette leçon dans le web au début des années 2000. Eh bien, ce n’est pas différent pour les e‑mails. Sauf que dans un e‑mail, on est parfois obligé d’utiliser des tableaux pour utiliser certains styles (comme width ou padding) dans les Outlook sur Windows.
Dans VoiceOver, chaque ligne et chaque celle d’une <table> est lue à voix haute. Voici l’exemple d’un e‑mail de Jacadi (et voici son code).
Pour éviter ça, on peut utiliser l’attribut role="presentation" sur chaque tableau de mise en page. Voici une vidéo de l’exemple précédent, mis à jour avec cet attribut sur le tableau principal.
VoiceOver a quelques cas particuliers où il sera suffisamment intelligent pour ne pas prononcer une ligne ou cellule comme telle si un tableau a uniquement une ligne ou une cellule. Mais par précaution, c’est une bonne pratique d’ajouter role="presentation" sur chaque tableau de mise en page.
4. Utiliser l’attribut lang.
Tout le monde ne parle pas la même langue que vous. De même, tout le monde n’a pas son ordinateur configuré dans la même langue par défaut que vous. Sans indication sur la langue du contenu en cours, un lecteur d’écran comme VoiceOver va généralement utiliser une langue par défaut.
Cela signifie que si votre ordinateur et VoiceOver sont configurés par défaut en français, une page web ou un email en anglais sans indication de langue sera lue avec une voix française. Si vous vous êtes déjà demandé à quoi ressemblait un robot français qui lit en anglais, c’est votre jour de chance.
Voici l’exemple d’un e‑mail de Mailchimp (dont voici le code).
Ajouter l’attribut lang="en" sur la balise <html> suffit à rendre cet e‑mail plus accessible. VoiceOver est maintenant capable d’utiliser la bonne langue (pourvue qu’elle soit installée sur votre ordinateur). Voici le résultat.
Ces quelques conseils ne garantissent par que vos e‑mails seront 100 % accessibles. Mais je pense que ce sont des premiers pas faciles à mettre en pratique.
Pour citer l’intégrateur d’e‑mails Paul Airy dans sa conférence Accessibility in Action à Litmus Live l’an dernier :
La moindre implémentation d’accessibilité, même la plus petite, est un succès.
Alors en avant pour une année pleine de succès !