Conception de contenu accessible accessible-content

La loi européenne sur l'accessibilité est une directive visant à renforcer le marché intérieur des produits et services accessibles en éliminant les obstacles dus aux différences entre les règles nationales des États membres.

Ce règlement stipule que toutes les communications numériques, y compris les courriels, 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 directives spécifiques, telles que l’utilisation de polices accessibles, de formats lisibles et de fournir un texte secondaire pour les images.

Le Journey Optimizer Designer des e-mails, qui permet aux marketeurs de créer du contenu pour les e-mails et les pages de destination, vous permet de vous conformer facilement à cette directive, en fonction des directives d’accessibilité du contenu web (WCAG) 2.1, niveau AA.

En conséquence, les bonnes pratiques pour concevoir un contenu accessible avec Journey Optimizer sont répertoriées ci-dessous.

Utilisez l’onglet Styles du composant Texte pour vous assurer que votre texte est lisible, par exemple en utilisant un contraste de couleur approprié et des polices simples. En savoir plus

{width="80%"}

Pour les polices et le texte, suivez les instructions ci-dessous :

Sélection de polices

Dimensionnement de police

Contraste des couleurs

Accessibilité du texte

Garantir l’accessibilité visuelle visual-accessibility

Pour vous assurer que votre contenu est accessible visuellement, suivez les bonnes pratiques ci-dessous :

En 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 du volet Designer d’e-mail Styles. En savoir plus

Par exemple, vous pouvez mettre à jour le arrière-plan ou modifier les marges, la marge intérieure et l’alignement pour améliorer l’accessibilité visuelle de votre contenu. En savoir plus

{width="80%"}

De plus, le Designer 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 Basculer vers la vue en direct afin de vérifier comment votre contenu peut s’afficher sur différentes tailles d’appareil.

{width="80%"}

Utiliser un texte secondaire pour les images alt-text

Utilisez le composant Image pour fournir un texte secondaire pour les images. En savoir plus

{width="90%"}

Pour un texte secondaire efficace dans les produits numériques, suivez les directives ci-dessous :

Utiliser un format lisible readable-format

Utilisez la structure et les composants de contenu pertinents pour Email Designer, ainsi que les options du volet Styles pour organiser votre contenu d’une manière claire, logique et concise, accessible à tous.

{width="100%"}

Garantir la lisibilité du contenu readability

Pour être lisible, votre contenu doit être clair, bien structuré et utilisable par tous, 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 :

Pour évaluer la lisibilité de vos e-mails, vous pouvez utiliser le populaire test 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. Ils ne sont pas spécialement conçus pour vérifier si votre contenu est entièrement accessible, mais ils peuvent fournir un premier niveau de vérification.

{width="90%"}

Pour vérifier de manière plus cohérente si votre contenu est accessible de manière fiable, recherchez des outils externes spécifiques tels que :

Utiliser le mode sombre dark-mode

Le mode sombre améliore l’accessibilité visuelle pour les utilisateurs et utilisatrices sensibles à la lumière ou ayant une déficience visuelle, pour une expérience de visionnage améliorée.

{width="90%"}

Parmi les bonnes pratiques pour concevoir du contenu en mode sombre, utilisez des PNG ou des SVG transparents, définissez les balises meta et CSS appropriées et fournissez un style de secours 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 le contenu des e-mails et les éléments de l’interface utilisateur en modes clair et sombre.

Les bonnes pratiques détaillées spécifiques au mode sombre, y compris les directives pour assurer l’accessibilité, sont répertoriées dans cette section.

Utilisation d’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 (direction du texte) dans le corps du contenu. Ces attributs aident les technologies d’assistance telles que les lecteurs d’écran à interpréter et présenter votre contenu d’une manière appropriée.

Les lecteurs d’écran s’appuient sur l’attribut lang pour appliquer les règles de prononciation correctes, tandis que la direction du texte assure naturellement le flux du contenu pour les langues écrites de gauche à droite ou de droite à gauche. Sans ces attributs, l’ordre de lecture peut être déroutant et l’utilisateur risque de mal prononcer son mot. Par conséquent, enveloppez toujours le corps de votre e-mail avec les attributs de lang et de dir appropriés.

Tableaux tables

Dans les contenus HTML, les 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 des role="presentation" (ou des role="none") aux tableaux de disposition pour vous assurer que les technologies d’assistance ignorent leur structure et se concentrent uniquement sur le contenu réel.

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">

  <tr>

    <td align="center">

      <h1>Hello World</h1>

      <p>Welcome to our newsletter</p>

    </td>

  </tr>

</table>

<table border="1" cellpadding="5" cellspacing="0">

  <tr>

    <th scope="col">Name</th>

    <th scope="col">Score</th>

  </tr>

  <tr>

    <td>Alice</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>88</td>

  </tr>

</table>

Texte des liens links

Les lecteurs d’écran lisent les liens à l’aide de leur texte. Si un lien est libellé 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 Designer 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 ».

{width="70%"}

<p>Learn more in the

<a href="https://adobe.com/release-notes">August release notes</a>.

</p>

<p>Learn more about our new features.

  <a href="https://adobe.com/release-notes">Click here</a>.

</p>

Prise en charge de la navigation au clavier et de la sélection keyboard

La prise en charge de la navigation au clavier et du focus permet aux personnes qui ne peuvent pas utiliser de souris d’accéder au contenu et d’interagir avec celui-ci. Elle améliore également la convivialité globale en offrant à tous les utilisateurs et utilisatrices un moyen clair et cohérent de parcourir les informations.