Introduction
L’accessibilité numérique, c’est avant tout une question d’humain : donner à chacun la possibilité d’accéder, de comprendre et d’agir dans le monde digital. Ce principe d’inclusion, essentiel à toute société équitable, est désormais légiférée, affirmant que l’égalité d’accès au numérique n’est plus une option, mais un devoir collectif.
Concevoir des emails accessibles, c’est garantir une lecture fluide, une expérience inclusive et une conformité intégrée dès la création. L’accessibilité n’est pas une option, c’est une exigence.
Titre et langue du contenu
- Titre de l’email : Ajouter un titre clair et descriptif permet d’identifier plus facilement le contenu du message, notamment dans certains outils de lecture ou d’aperçu.
- Langue de l’email : Indiquer la langue principale (par exemple : fr) aide les technologies d’assistance à prononcer correctement le texte et à appliquer les bonnes règles linguistiques.
Ces informations peuvent être renseignées directement dans l’éditeur drag and drop depuis la section paramètres de votre contenu.
Bon à savoir : même des réglages anodins comme le titre et la langue du contenu contribuent à une meilleure compréhension et à une expérience de lecture plus fluide.
Images et textes alternatifs
Le texte alternatif décrit une image pour les technologies d’assistance, comme les lecteurs d’écran. Son rôle est de transmettre l’information visuelle à toute personne qui ne voit pas l’image.
- Image décorative (ex. : visuel purement décoratif) : laisser le champ vide pour que le lecteur d’écran l’ignore.
- Image informative (ex. : visuel produit, photo d’un événement) : ajouter une courte description qui résume l’information essentielle.
- Image fonctionnelle (ex. : icône de réseau sociaux) : décrire l’action associée, par exemple « Ouvrir la page Facebook ».
- Image type Titre (ex. : visuel contenant un titre) : veiller à indiquer le texte du titre dans le champ alt et à appliquer la bonne hiérarchie. (Voir la section suivante pour plus de détails.
Ces réglages peuvent être effectués directement dans l’éditeur drag and drop, dans les paramètres de configuration des composants images.
Bon à savoir : Un texte alternatif bien rédigé rend les visuels compréhensibles pour tous et améliore la clarté du message, y compris pour les personnes utilisant un lecteur d’écran.
Titres et hiérachisation du contenu
Les titres jouent un rôle essentiel pour organiser le contenu et permettre aux technologies d’assistance de naviguer facilement dans l’email.
-
Titre textuel : Lorsqu’un titre est ajouté sous forme de texte dans l’éditeur, il est important de choisir le bon niveau (H1, H2, H3, etc.) afin de refléter la hiérarchie du contenu. Cela aide les lecteurs d’écran à comprendre la structure du message.
Astuce : éviter les titres entièrement en majuscules, car certains lecteurs d’écran peuvent les lire lettre par lettre, rendant la lecture moins fluide.
-
Titre en image : Lorsqu’un visuel est utilisé à la place d’un titre (par exemple dans une bannière), il est recommandé de :
- renseigner le texte alternatif (alt) avec le contenu du titre, pour que les lecteurs d’écran puissent le restituer correctement
- indiquer le niveau hiérarchique de l'image grâce aux options d’accessibilité disponibles dans l’éditeur.
Cette structuration garantit une meilleure compréhension et facilite la navigation, y compris au clavier.
Bon à savoir : le titre sous forme de texte reste la solution la plus accessible et la plus simple à maintenir. L’utilisation d’un titre en image doit rester ponctuelle, lorsque la mise en page le nécessite.
Boutons
Le texte d’un bouton doit décrire clairement l’action qu’il déclenche. Cela permet à tous les utilisateurs, y compris ceux utilisant des lecteurs d’écran, de comprendre immédiatement la fonction du bouton.
- Bouton explicite : Lorsque le texte indique clairement l’action (ex. : « Télécharger le guide », « S’inscrire à la newsletter »), aucune information supplémentaire n’est nécessaire.
- Bouton non explicite : Si le texte est trop court ou peu précis (ex. : « En savoir plus », « Cliquez ici »), il est possible d’ajouter une description complémentaire grâce à l’option aria-label disponible dans le composant bouton de l’éditeur drag and drop. Cette option permet de préciser l’action attendue sans modifier l’apparence du bouton.
Bon à savoir : un bon bouton se comprend sans explication supplémentaire. Un texte clair et explicite est toujours préférable à un aria-label. Ce dernier doit rester une solution ponctuelle, pas la méthode par défaut.
Tailles des textes
Une taille de texte adaptée facilite la lecture pour tous, notamment pour les personnes ayant une basse vision ou sur des écrans mobiles.
- Texte principal : Choisir une police suffisamment grande garantit une lecture fluide sans nécessiter de zoom.
- Éléments importants : Pour les titres, boutons (CTA) et textes de lien, privilégier une taille qui les rend facilement visibles et distincts du reste du contenu.
Vérifier le rendu sur différents supports (ordinateur, mobile, tablette) permet de s’assurer d’une bonne lisibilité partout.
Bon à savoir : un texte bien dimensionné profite à tous les lecteurs et améliore à la fois le confort et l’engagement.
Couleurs et contrastes
Un bon contraste entre le texte et l’arrière-plan est essentiel pour garantir la lisibilité des contenus, pour tous les lecteurs.
- Éviter les combinaisons trop proches : certaines couleurs peuvent être difficiles à distinguer, surtout sur les petits textes.
- Respecter les niveaux recommandés par le RGAA : au moins 4:5:1 pour le texte standard et 3:1 pour les titres et gros caractères.
- Tester vos couleurs : utiliser un vérificateur de contraste permet de vérifier rapidement la conformité de vos combinaisons.
À appliquer à tous les éléments de texte importants, y compris les titres, boutons (CTA) et textes de lien, pour que chaque information reste visible et compréhensible.
Bon à savoir : un contraste adapté n’est pas seulement une obligation réglementaire - c’est aussi un facteur clé de confort et de lisibilité pour tous vos lecteurs.
Gifs animés
Les GIFs peuvent apporter du dynamisme aux emails, mais il est important de respecter certaines limites pour préserver l’expérience de tous les utilisateurs.
Bonnes pratiques :
- Durée limitée : un GIF ne doit pas dépasser 5 secondes.
- Animations par seconde : respecter un nombre raisonnable d’images par seconde pour éviter des effets visuels gênants ou la fatigue visuelle.
Bon à savoir : des animations trop longues ou trop rapides peuvent gêner certains utilisateurs, notamment ceux sensibles aux mouvements ou utilisant des technologies d’assistance. En respectant ces limites, les emails restent agréables et accessibles pour tous.
Conclusion
Appliquer les bonnes pratiques pour créer des emails accessibles garantit des emails réellement inclusifs et efficaces. Même l’adoption partielle de ces recommandations améliore la lisibilité, la navigation et l’expérience utilisateur.
Articles complémentaires
À quoi sert un texte alternatif ?
Comment utiliser un composant image ?
Recommendation sur le format et le poids des images
Fichiers acceptés dans la bibliothèque des fichiers
Comment utiliser un composant texte ?
Recommendations sur les tailles de texte
Comment utiliser un composant bouton ?
Comment vérifier que mon url est fonctionnelle ?
Couleurs utilisées dans le contenu
Comprendre l'ajustement des couleurs dans l'éditeur Drag & drop