Concevoir du contenu accessible accessible-content
L’Acte législatif européen sur l’accessibilité est une directive visant à renforcer le marché intérieur des produits et services accessibles en éliminant les obstacles dus aux divergences entre les règles nationales des États membres.
Cette directive stipule que toutes les communications numériques, y compris les e-mails, les bulletins d’information, les fichiers PDF et le contenu téléchargeable, doivent être accessibles. Lors de la création de contenu pour vos destinataires, vous devez donc suivre des instructions spécifiques, telles que l’utilisation de polices accessibles, de formats lisibles et de textes alternatifs pour les images.
Le Journey Optimizer Concepteur d’e-mail, qui permet aux spécialistes marketing de créer du contenu pour les e-mails et les pages de destination, vous permet de respecter facilement cette directive, en se basant sur les règles WCAG 2.1, niveau AA.
Les bonnes pratiques relatives à la conception de contenu accessible avec Journey Optimizer sont répertoriées ci-dessous.
Garantir la lisibilité du texte text-readability
Utilisez l’onglet Styles du composant Texte pour vous assurer que votre texte est lisible, par exemple en utilisant un contraste de couleurs approprié et des polices simples. En savoir plus
Pour les polices et le texte, respectez les consignes suivantes :
Sélection de la police
- Utilisez des polices sans empattement telles qu’Arial, Verdana, Tahoma, Helvetica ou Open Sans.
- Évitez les polices avec empattement, cursives ou décoratives dans le contenu du corps.
- Utilisez un petit nombre de polices pour garantir la cohérence et disposer d’une solution de remplacement (par exemple :
font-family: Arial, Helvetica, sans-serif;
).
Taille de la police
- Veillez à ce que la taille de police minimale du corps du texte soit de 16 pixels.
- Utilisez une hiérarchie appropriée pour les en-têtes.
Contraste des couleurs
- Utilisez un rapport de contraste d’au moins 4,5:1 entre le texte et l’arrière-plan.
- Pour les grands textes (≥24 px ou 18 px en gras), assurez-vous d’utiliser un contraste d’au moins 3:1.
- Évitez le texte gris clair ou pastel sur fond blanc.
- Ne vous reposez pas uniquement sur la couleur pour transmettre un message, mais utilisez plutôt des soulignements, des icônes, etc.
Accessibilité du texte
- Évitez le texte dans les images.
- N’utilisez pas de majuscules dans le corps du texte.
- Assurez-vous que le texte peut être agrandi jusqu’à 200 % sans altérer la mise en page.
Garantir l’accessibilité visuelle visual-accessibility
Pour vous assurer que votre contenu est accessible visuellement, suivez les bonnes pratiques ci-dessous :
- Évitez d’utiliser des indicateurs de couleur uniquement pour les informations importantes.
- Utilisez des libellés ou des icônes de texte pour garantir la clarté.
- Optimisez votre conception pour les mises en page mobiles et réactives en vous assurant que les boutons sont grands et suffisamment espacés.
- Effectuez des tests réguliers sur différents appareils et tailles d’écran pour garantir l’accessibilité.
Dans Journey Optimizer, la taille et l’espacement des différents éléments de votre contenu peuvent être affinés à l’aide des paramètres et attributs de style dans le volet Styles du Concepteur d’e-mail. En savoir plus
Par exemple, vous pouvez mettre à jour l’arrière-plan ou modifier les marges, les marges intérieures et l’alignement pour améliorer l’accessibilité visuelle de votre contenu. En savoir plus
De plus, le Concepteur d’e-mail Journey Optimizer vous permet de prévisualiser et d’optimiser la conception pour différents appareils et tailles d’écran. Vous pouvez à tout moment Passer à la vue dynamique afin de vérifier que votre contenu s’affiche correctement sur les différents appareils.
Utiliser un texte secondaire pour les images alt-text
Utilisez le composant Image pour fournir un texte secondaire pour les images. En savoir plus
Pour un texte secondaire efficace dans les produits numériques, respectez les consignes suivantes :
- Décrivez l’objectif de l’image de manière concise et contextuelle.
- Évitez les expressions redondantes telles que « Image de… » et utilisez un texte secondaire vide pour les images décoratives.
- Pour les icônes significatives, fournissez des libellés significatifs. Pour les images complexes, utilisez un bref texte secondaire ainsi qu’une description plus détaillée ailleurs.
Utiliser un format lisible readable-format
Utilisez la structure et les composants de contenu pertinents du Concepteur d’e-mail ainsi que les options du volet Styles pour organiser votre contenu de manière claire, logique, concise et accessible à l’ensemble des utilisateurs et utilisatrices.
- Utilisez du code HTML sémantique structuré avec des en-têtes, des paragraphes, des listes et des tableaux appropriés.
- Assurez-vous que le contenu est agencé logiquement, de gauche à droite et de haut en bas.
- Utilisez un langage clair et concis.
- Proposez des formats alternatifs pour les PDF et les infographies.
- Autorisez le redimensionnement et le réagencement du texte, et assurez-vous que la typographie est lisible avec un contraste de couleurs adéquat dans tous les formats.
Garantir la lisibilité du contenu readability
Pour être lisible, votre contenu doit être clair, bien structuré et utilisable par tout le monde, y compris les personnes ayant des difficultés visuelles, cognitives ou de lecture et celles qui utilisent des technologies d’assistance. Voici quelques points à prendre en compte lors de la création de contenu accessible :
- Limitez les phrases à une vingtaine de mots ou moins.
- Rédigez du texte direct et concis.
- Utilisez la voix active pour simplifier la structure de la phrase.
- Évitez l’argot, le jargon ou les expressions régionales que certaines personnes ne connaissent pas.
Pour évaluer la lisibilité de vos e-mails, vous pouvez utiliser le test de lisibilité Flesch Reading Ease, disponible dans Microsoft Word et qui calcule la facilité de lecture de votre contenu sur une échelle de 0 à 100.
Tester votre contenu test
Pour vérifier l’accessibilité de votre contenu, vous pouvez utiliser les fonctionnalités de test fournies par Journey Optimizer. Elles ne sont pas spécialement conçues pour vérifier si le contenu est entièrement accessible, mais elles peuvent fournir un premier niveau de vérification.
-
Prévisualisez votre contenu à l’aide de profils de test. Voici comment procéder
-
Utilisez l’option Rendu d’e-mail qui tire parti de Litmus pour simuler vos conceptions sur les principaux clients de messagerie (Apple Mail, Gmail, Outlook) et vérifier si le texte, les couleurs et les images rendent votre contenu accessible.
-
Envoyez des BAT pour tester le rendu de votre contenu avant de l’envoyer à votre audience réelle. Voici comment procéder
Pour vérifier de manière plus fiable si votre contenu est accessible, recherchez des outils externes spécifiques tels que :
-
Le vérificateur de contraste WebAim et l’outil d’évaluation de l’accessibilité web WAVE pour évaluer le contraste et la conformité ;
-
Les technologies d’assistance comme les lecteurs d’écran (par exemple : NVDA ou VoiceOver sur iPhone) pour consulter les e-mails du point de vue des personnes souffrant de déficience visuelle.
Utiliser le mode sombre dark-mode
Le mode sombre améliore l’accessibilité visuelle pour les personnes sensibles à la lumière ou ayant une déficience visuelle, ainsi que leur expérience de visionnage.
Parmi les bonnes pratiques de conception de contenu en mode sombre, utilisez des PNG ou des SVG transparents, définissez les balises meta et CSS appropriées et créez un style de remplacement accessible si le mode sombre n’est pas pris en charge. Enfin, assurez-vous que les e-mails s’affichent correctement en mode sombre en testant tout leur contenu et les éléments de l’interface d’utilisation en modes clair et sombre.
Les bonnes pratiques détaillées relatives au mode sombre, y compris les consignes pour assurer l’accessibilité, sont répertoriées dans cette section.
Utiliser des attributs spécifiques pour l’accessibilité attributes
Attributs de langue language
Lors de la création de conceptions, incluez les attributs lang
(langue) et dir
(sens d’écriture) dans le corps du contenu. Ces attributs permettent aux technologies d’assistance telles que les lecteurs d’écran d’interpréter et de présenter votre contenu de manière appropriée.
-
L’attribut
lang
indique la langue de l’e-mail aux technologies d’assistance, afin que les mots soient prononcés correctement.accordion Exemples Exemple pour l’anglais :
code language-none <body lang="en">
Exemple pour le français :
code language-none <body lang="fr">
-
L’attribut
dir
spécifie le sens de l’écriture. La plupart des langues, y compris l’anglais et le français, se lisent de gauche à droite (ltr), tandis que les langues telles que l’arabe et l’hébreu se lisent de droite à gauche (rtl).accordion Exemples Exemple pour l’anglais (de gauche à droite) :
code language-none <body lang="en" dir="ltr">
Exemple pour l’arabe (de droite à gauche) :
code language-none <body lang="ar" dir="rtl">
Les lecteurs d’écran se réfèrent à l’attribut lang
pour appliquer les bonnes règles de prononciation, tandis que le sens de l’écriture assure naturellement l’agencement du contenu pour les langues écrites de gauche à droite ou de droite à gauche. Sans ces attributs, l’ordre de lecture peut être confus et des mots peuvent être mal prononcés. Par conséquent, enveloppez toujours le corps de votre e-mail avec les attributs lang
et dir
appropriés.
<table>
ou <td>
) pour vous assurer que chaque partie est lue correctement.Tableaux tables
Dans les contenus HTML, des tableaux sont souvent utilisés pour la mise en page. Par défaut, les lecteurs d’écran traitent chaque <table>
comme un tableau de données, annonçant les lignes, les colonnes et la structure. Cela peut prêter à confusion si le tableau n’est utilisé que pour la mise en forme.
Ajoutez role="presentation"
(ou role="none"
) aux tableaux de mise en page pour vous assurer que les technologies d’assistance ignorent leur structure et se concentrent uniquement sur le contenu.
role="presentation"
)code language-none |
---|
|
Les lecteurs d’écran lisent :
« Bonjour tout le monde. Bienvenue dans notre newsletter. » (Aucune mention de lignes, colonnes ni tableau)
role="presentation"
)code language-none |
---|
|
Les lecteurs d’écran lisent :
« Tableau avec 2 colonnes et 3 lignes. »
« Nom, Alice. Score, 95. »
« Nom, Bob. Score, 88. »
role="presentation"
exclusivement pour les tableaux de mise en page. Pour les tableaux de données, conservez la structure <table>
sémantique afin que les lecteurs d’écran puissent annoncer correctement les en-têtes et les relations.Texte des liens links
Les lecteurs d’écran lisent les liens à l’aide de leur texte. Si le libellé d’un lien est uniquement « Cliquez ici » ou « En savoir plus », les utilisateurs et utilisatrices de technologies d’assistance ne connaîtront pas la destination. Pour garantir leur accessibilité, ils ont besoin d’un texte descriptif qui indique clairement la cible ou l’action.
Utilisez le Concepteur d’e-mail pour ajouter un lien à votre contenu et modifier le libellé afin de le rendre perceptible (visible) et descriptif (clarifier l’objectif). Évitez les libellés vagues tels que « ici » ou « plus ».
code language-none |
---|
|
Les lecteurs d’écran lisent :
« Lien, notes de mise à jour d’août. »
code language-none |
---|
|
Les lecteurs d’écran lisent :
« Lien, cliquez ici. » (Ne fournit aucun contexte en dehors de l’ordre de lecture.)
Prévoir la navigation au clavier et la gestion du focus keyboard
La navigation au clavier et la gestion du focus permettent aux personnes qui ne peuvent pas utiliser de souris d’accéder au contenu et d’interagir avec celui-ci. Elles améliorent également la convivialité globale en offrant à l’ensemble des utilisateurs et utilisatrices un moyen clair et cohérent de parcourir les informations.
-
Focus via le clavier
-
Assurez-vous que tous les éléments interactifs (tels que les boutons, cases à cocher, liens) comportent
tabindex="0"
afin qu’ils soient inclus dans l’ordre naturel de tabulation. -
Permettez la navigation à l’aide de la touche de tabulation et des touches fléchées (↑ ↓ ← →), qui doivent mettre en évidence l’élément sélectionné.
-
-
Style de focus personnalisé
-
Appliquez des styles clairs que l’on puisse distinguer afin de mettre en évidence les éléments interactifs :
accordion Exemple (CSS) code language-none [tabindex="0"] : focus { outline: 2px solid #00AEEF; /* Cyan border */ background-color: #20CEFF; /* Optional background */ }
-
Assurez-vous que les indicateurs de focus respectent les normes d’apparence de focus WCAG 2.2, notamment :
-
Surface minimum : contour de 2 pixels CSS d’épaisseur.
-
Rapport de contraste : ≥ 3 :1 entre l’état sélectionné et non sélectionné.
-
-
-
Prise en charge de l’activation au clavier
-
Assurez-vous que les cases à cocher et les boutons répondent aux touches Entrée et Espace.
-
Validez l’interaction à l’aide du clavier uniquement :
-
Touches Entrée ou Espace pour cocher/décocher les cases.
-
Les touches Entrée ou Espace doivent déclencher les boutons.
-
-