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

{width="80%"}

Pour les polices et le texte, respectez les consignes suivantes :

Sélection de la police

Taille de la 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 :

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

{width="80%"}

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.

{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, respectez les consignes suivantes :

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.

{width="100%"}

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 :

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.

{width="90%"}

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

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.

{width="90%"}

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.

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.

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.

<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 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 ».

{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>

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.