Skip to content

Créer des messages accessibles dans Braze

Découvrez pourquoi l’accessibilité est importante dans votre contenu marketing, et comment vous pouvez créer des messages accessibles dans Braze. Pour plus de conseils, consultez notre cours Fondamentaux de l’envoi de messages accessibles sur Braze Learning.

Un contenu marketing qui exclut les personnes en situation de handicap, même involontairement, peut empêcher des millions de personnes d’interagir avec votre marque. L’accessibilité en marketing consiste à permettre à chacun de vivre votre marketing, de comprendre votre communication et d’avoir la possibilité d’investir dans votre produit, service ou marque, ou d’en devenir fan.

Lors de la conception de vos messages, prenez le temps supplémentaire de réfléchir à la manière dont vous pouvez rendre vos créations accessibles à l’ensemble de vos clients.

L’accessibilité chez Braze

Soutenir une communication accessible signifie rester ouvert, curieux et disposé à apprendre. Chez Braze, nous tenons à aider les gens à se connecter, et nous savons que faire de la place pour tout le monde fait partie de cet engagement. L’accessibilité n’est jamais quelque chose que nous considérons comme « terminé », et nous accueillons avec plaisir l’occasion de continuer à apprendre.

Si vous avez des commentaires sur l’accessibilité de Braze ou sur les messages envoyés par Braze, n’hésitez pas à nous en faire part. Ouvrez le menu Support dans l’en-tête global et sélectionnez Partager le retour d’information pour nous faire part de vos commentaires.

Domaines de handicap à prendre en compte

Cette section est partiellement adaptée de W3C: Diverse Abilities and Barriers.

Les handicaps visuels peuvent aller d’une perte de vision légère ou modérée dans un ou les deux yeux, à une perte de vision importante ou totale dans les deux yeux. Certaines personnes ont une sensibilité réduite ou absente à certaines couleurs, ou une sensibilité accrue aux couleurs vives.

Pour interagir avec votre contenu, ces utilisateurs ont besoin de pouvoir :

  • Agrandir ou réduire la taille du texte et des images
  • Personnaliser les paramètres de polices, couleurs et espacement
  • Écouter la synthèse vocale du contenu (c’est-à-dire utiliser un lecteur d’écran)
  • Écouter les audiodescriptions des vidéos
  • Lire le texte à l’aide d’un afficheur Braille

Les handicaps auditifs peuvent inclure une déficience auditive légère à modérée dans une ou les deux oreilles. Même une perte auditive partielle peut être problématique en ce qui concerne le contenu audio.

Pour comprendre votre contenu, ces utilisateurs s’appuient sur :

  • Des transcriptions et des sous-titres du contenu audio
  • Des lecteurs multimédias qui affichent les sous-titres et offrent des options pour ajuster la taille et les couleurs du texte des sous-titres
  • Des options pour arrêter, mettre en pause et ajuster le volume du contenu audio (indépendamment du volume système)
  • Un audio de premier plan de haute qualité, clairement distinguable de tout bruit de fond

Les handicaps physiques peuvent inclure une faiblesse et des limitations du contrôle musculaire ou de la sensation, des troubles articulaires, des douleurs qui entravent le mouvement et des membres manquants.

Ces utilisateurs s’appuient sur la prise en charge du clavier pour activer les fonctionnalités (même s’ils n’utilisent pas un clavier standard). Pour interagir avec votre contenu, ces utilisateurs ont besoin de :

  • Zones cliquables de grande taille
  • Suffisamment de temps pour accomplir les tâches
  • Indicateurs visibles du focus actuel
  • Mécanismes pour sauter des blocs de contenu, comme les en-têtes de page ou les barres de navigation

Les handicaps cognitifs, d’apprentissage et neurologiques englobent la neurodiversité et les troubles neurologiques, ainsi que les troubles comportementaux et de santé mentale qui ne sont pas nécessairement neurologiques. Ils peuvent affecter n’importe quelle partie du système nerveux et impacter la capacité des personnes à entendre, se déplacer, voir, parler et comprendre les informations.

Selon les besoins individuels, ces utilisateurs s’appuient sur :

  • Un contenu clairement structuré
  • Un étiquetage cohérent des formulaires, boutons et autres contenus
  • Des cibles de liens prévisibles et une interaction globale cohérente
  • Différents moyens de navigation, tels que des menus et des barres de recherche
  • Des paramètres pour désactiver le contenu clignotant, scintillant ou autrement distrayant
  • Un texte plus simple accompagné d’images

Bonnes pratiques

Créer du contenu accessible n’a pas besoin d’être accablant. De petits choix réfléchis peuvent faire une grande différence. Cette section présente des conseils pratiques qui aident davantage de personnes à lire, naviguer et interagir avec vos messages. Que vous ajustiez votre texte, stylisiez vos boutons ou ajoutiez du texte alternatif aux images, chaque amélioration contribue à une expérience plus inclusive. Allons-y.

Contenu

Structure et flux

Commençons par les fondations. Lorsque votre contenu a une structure claire, il est plus facile à suivre pour tout le monde, en particulier pour les personnes qui utilisent des lecteurs d’écran ou la navigation au clavier.

  • Divisez votre contenu en sections : L’utilisation de titres, de puces et de listes aide les gens à comprendre et à parcourir rapidement votre contenu, même lorsqu’ils sont pressés.
  • Ne sautez pas de niveaux de titres : Les titres donnent une structure à votre contenu, aidant les lecteurs à comprendre rapidement comment les sections sont liées entre elles. Lorsque vous sautez des niveaux de titres (par exemple, en passant directement d’un H2 à un H4), vous brisez cette structure logique. Cela rend plus difficile pour les utilisateurs, en particulier ceux qui utilisent des lecteurs d’écran, de naviguer et de comprendre clairement votre message. Suivez toujours une hiérarchie logique et séquentielle des titres (H1 vers H2 vers H3, et ainsi de suite) pour vous assurer que votre contenu reste organisé, accessible et facile à suivre pour tout le monde.

Lisibilité

Une fois votre structure en place, l’étape suivante consiste à vous assurer que vos mots sont réellement faciles à lire. Cela signifie garder les choses simples, faciles à parcourir et confortables à lire sur tous les appareils et pour tous les besoins des utilisateurs.

  • Écrivez des phrases courtes et claires : Les phrases courtes sont faciles à comprendre pour tout le monde, en particulier pour les personnes utilisant des lecteurs d’écran ou ayant des difficultés à traiter des informations complexes. Écrivez à un niveau de lecture correspondant à la cinquième (environ 12 ans). Vous pouvez utiliser des ressources telles que Hemingway App pour vérifier le niveau de lecture de votre texte.
  • Choisissez des tailles de police et un espacement lisibles : Un texte trop petit peut être difficile à lire, surtout sur mobile. Utilisez au moins 14 px pour le corps du texte. Agrandissez les titres pour que les utilisateurs puissent clairement voir la différence. Un espacement supplémentaire entre les lignes (environ 1,5 de hauteur de ligne) et les paragraphes améliore la lisibilité, en particulier pour les personnes ayant des besoins visuels ou cognitifs.
  • Évitez le texte justifié : Le texte justifié crée un espacement inégal entre les mots, rendant la lecture difficile pour les personnes dyslexiques ou ayant des handicaps cognitifs. Envisagez d’aligner à gauche le contenu qui s’étend sur plus de deux lignes pour les langues de gauche à droite, ou à droite pour les langues de droite à gauche.
  • Utilisez le gras, l’italique et les majuscules avec parcimonie : Mettre trop de texte en évidence rend la lecture difficile, en particulier pour les personnes dyslexiques ou malvoyantes. Restez simple.

Clarté et facilité d’utilisation

Enfin, parlons des détails les plus fins, ceux qui aident les utilisateurs non seulement à voir votre contenu, mais aussi à le comprendre et à interagir avec lui.

  • Étiquetez clairement les liens et les boutons : Assurez-vous que le texte de vos liens et boutons explique clairement ce qui va se passer ensuite. Cela aide les personnes utilisant des lecteurs d’écran ou naviguant au clavier à savoir à quoi s’attendre.
  • Utilisez les symboles et les emojis avec modération : Les caractères spéciaux et les emojis peuvent rendre votre contenu ludique, mais ils peuvent être déroutants lorsqu’ils sont lus par des lecteurs d’écran. Utilisez-les avec parcimonie et assurez-vous qu’ils ne remplacent pas un texte clair et descriptif.
  • Testez la troncature : Testez toujours votre texte en envoyant un message de test sur un appareil pour vous assurer que votre texte n’est pas tronqué. Si votre message est coupé, cela nuit à la fois à vous et à votre audience, car cela empêche votre contenu de les atteindre.

Langue d’accessibilité

La langue d’accessibilité indique aux lecteurs d’écran et autres outils d’assistance dans quelle langue se trouve votre contenu. Pour les canaux qui envoient une page HTML complète ou un e-mail, Braze peut ajouter une balise de langue (lang) lorsque vous la définissez dans l’éditeur ou via Liquid. Cela prend en charge le critère de succès WCAG 2.1 3.1.1 Langue de la page (niveau A).

Si vous laissez la langue d’accessibilité vide et qu’aucune valeur par défaut sûre n’est disponible, Braze omet la balise de langue. Si aucune langue n’est définie, les outils d’assistance se rabattent souvent sur la langue du téléphone ou de l’ordinateur de la personne. Si celle-ci diffère de la langue du message, la prononciation peut être incorrecte.

Les Campaigns et les Canvas utilisent les mêmes éditeurs pour ces options, sauf si une fonctionnalité n’est pas disponible pour votre espace de travail.

Configurer la langue d’accessibilité

Lorsque votre éditeur le propose, accédez à la section Accessibilité dans les paramètres du message. Choisissez une langue dans le menu déroulant ou utilisez Liquid (par exemple {{accessibility_language}} lorsque les messages multilingues sont activés et que les Paramètres de localisation sont configurés).

Messages multilingues

Dans les Paramètres de localisation, définissez une langue d’accessibilité pour chaque locale afin que Liquid puisse renseigner {{accessibility_language}} pour les envois localisés. Le fait que cette valeur soit déjà sélectionnée pour les nouveaux messages dépend du canal. Pour les flux de travail CSV et de traduction, commencez par Paramètres de langue et accessibilité.

Prise en charge par canal et éditeur

Utilisez ce tableau pour comparer les canaux. Les valeurs par défaut peuvent différer, alors vérifiez ce que votre audience reçoit réellement.

Canal Ce qu’il faut savoir
E-mail (glisser-déposer, modèle complet) Définissez la langue dans l’éditeur. Avec les messages multilingues, un modèle d’e-mail complet peut faire correspondre automatiquement la langue de chaque locale. Si vous utilisez uniquement des Content Blocks (ligne unique), ces raccourcis ne fonctionnent pas de la même manière — choisissez la langue vous-même là où l’éditeur le permet.
E-mail (code HTML) Braze n’ajoute pas de balise de langue pour vous. Ajoutez-la dans votre HTML si nécessaire.
Messages in-app (glisser-déposer) Lorsque vous choisissez une langue sous Accessibilité, Braze ajoute cette langue au HTML externe du message afin que les lecteurs d’écran traitent l’ensemble du message dans cette langue. Avec les messages multilingues activés, les nouveaux messages peuvent utiliser par défaut les langues de vos locales. La prévisualisation peut ne pas afficher de langue tant que vous n’en avez pas choisi une sous Paramètres.
Bannières Même comportement que les messages in-app.
Pages d’accueil Vous pouvez définir la langue sur la page en ligne. Choisissez une langue, ou utilisez Liquid si votre compte autorise Liquid sur les pages d’accueil. Les valeurs par défaut diffèrent également de celles des messages in-app et des bannières — vérifiez la page publiée.
Content Cards Les Content Cards utilisent un champ Langue pour les applications au lieu d’une langue d’accessibilité explicite.

Lorsque vous écrivez du HTML vous-même, vous pouvez toujours ajouter une balise de langue sur une partie du message (par exemple, une phrase dans une autre langue). Pour plus de modèles, consultez HTML personnalisé.

Référence aux normes

Lorsque Braze ajoute une balise de langue au niveau racine du HTML, il suit la règle HTML lang. Les outils de test recherchent souvent html-has-lang. Les Content Cards utilisent votre champ Langue au lieu de ce modèle HTML.

Boutons

Utilisez les boutons pour indiquer une action, comme l’envoi d’un formulaire ou la lecture d’un carrousel. Si vous naviguez vers une nouvelle URL, envisagez d’utiliser un lien à la place.

Rédigez un texte clair et orienté vers l’action

Comme pour le texte des liens, les libellés des boutons doivent décrire clairement l’action. Un texte de bouton efficace est spécifique et orienté vers l’action. Par exemple, « Valider la commande » indique clairement aux utilisateurs ce qui se passera lorsqu’ils cliqueront, tandis que simplement « Valider » peut être ambigu. Chaque libellé doit décrire précisément l’action prévue, afin que les lecteurs d’écran et tous les utilisateurs puissent facilement comprendre et anticiper le résultat lorsqu’ils interagissent avec vos boutons.

Gardez le texte des boutons concis pour éviter la troncature. Si le texte d’un bouton est trop long, il peut être coupé avec des points de suspension au lieu de passer à la ligne.

Utilisez un contraste de couleur suffisant

Le texte des boutons doit être facile à lire par rapport à la couleur d’arrière-plan du bouton. Vérifiez que le texte de vos boutons respecte les minimums de contraste WCAG 2.2 AA :

  • Ratio de contraste de 4,5:1 pour le texte de taille normale (la plupart des boutons)
  • Ratio de contraste de 3:1 pour le texte de grande taille (généralement au-dessus de 18 pt)

Un contraste élevé permet aux boutons de rester lisibles et cliquables pour tout le monde, y compris les utilisateurs malvoyants ou ceux qui consultent votre message dans des conditions difficiles. Pour plus de conseils, consultez la section Contraste des couleurs.

Rendez les boutons faciles à toucher

Assurez-vous que vos boutons (et liens) sont suffisamment grands et espacés pour les utilisateurs sur appareils mobiles. Des cibles tactiles trop petites ou trop rapprochées peuvent être frustrantes, voire impossibles à utiliser pour les personnes ayant des handicaps moteurs.

Utilisez les liens pour la navigation, comme diriger les utilisateurs vers une page externe.

Rédigez un texte de lien descriptif

Rédigez un texte de lien qui décrit clairement où le lien mènera l’utilisateur. Les utilisateurs de lecteurs d’écran passent souvent d’un lien à l’autre pour parcourir le contenu, alors assurez-vous que votre texte de lien peut se suffire à lui-même. Évitez les expressions comme « cliquez ici », « plus » et « cliquez pour plus de détails », car elles sont ambiguës lorsqu’elles sont lues hors contexte.

Par exemple, réfléchissez à la manière dont vous pourriez rédiger un lien vers un bulletin météo.

Mauvais Mieux Idéal
Cliquez ici Cliquez ici pour accéder à la météo du jour La météo du jour

Comme pour tout contenu, restez direct avec le moins de mots superflus possible.

Les éditeurs glisser-déposer de Braze produisent du HTML sémantique par défaut, donc les liens n’y sont pas stylisés comme des boutons. Cependant, si vous travaillez avec du HTML personnalisé ou effectuez des modifications au niveau du code, gardez ceci à l’esprit :

  • Les liens (<a>) répondent à la touche Entrée.
  • Les boutons (<button>) répondent aux touches Entrée et Espace.

Styliser un lien pour qu’il ressemble à un bouton peut dérouter les personnes qui naviguent au clavier : elles pourraient essayer d’appuyer sur Espace en s’attendant à ce que cela fonctionne.

Utilisez le bon élément pour l’action :

  • Utilisez <button> pour les actions, comme l’envoi d’un formulaire ou l’ouverture d’une fenêtre modale.
  • Utilisez <a> pour la navigation, comme un lien vers une autre page ou un fichier.
1
2
3
4
5

<!-- Recommended: A true button for an action -->
<button type="button">Download report</button>

<!-- Not recommended: A link styled as a button -->
<a href="#" class="btn">Download report</a>

Cibles tactiles

Les cibles tactiles sont toutes les parties de votre message sur lesquelles les utilisateurs appuient pour effectuer une action, comme les boutons, les liens ou les icônes. Ces éléments doivent être suffisamment grands et espacés pour que les gens puissent les toucher facilement, en particulier sur les appareils mobiles.

Lorsque les cibles tactiles sont trop petites ou trop rapprochées, il peut être frustrant, voire impossible, pour les utilisateurs ayant des difficultés de mobilité ou de dextérité d’interagir avec votre message. Améliorer cela peut aider à réduire les erreurs et à créer une expérience plus fluide pour tout le monde.

Voici ce qu’il faut garder à l’esprit :

  • Utilisez une taille de cible tactile adéquate. Visez une taille minimale de cible tactile de 44 x 44 pixels. Cela est conforme aux directives WCAG 2.2 pour les cibles tactiles et aux normes courantes d’ergonomie mobile.
  • Donnez à chaque cible de l’espace. Si les cibles tactiles sont trop rapprochées, comme des liens empilés ou des boutons regroupés de manière serrée, il peut être facile de manquer ou de toucher la mauvaise cible. Ajoutez de l’espacement ou du rembourrage entre les éléments pour éviter cela.
  • Ne vous fiez pas uniquement aux visuels. Même les petites icônes peuvent être rendues plus utilisables avec un rembourrage supplémentaire, leur permettant de respecter les exigences de taille minimale sans modifier la mise en page.
  • Prévisualisez sur mobile. Testez votre message sur différentes tailles d’écran et assurez-vous que les éléments interactifs sont faciles à utiliser.

Améliorer les cibles tactiles est l’un des moyens les plus efficaces de rendre votre message plus accessible sur mobile, et c’est une bonne pratique UX pour tout le monde.

Images

Fournissez un texte alternatif

Le texte alternatif (texte alt) est une courte description du contenu ou de la fonction d’une image que les lecteurs d’écran et autres technologies d’assistance fournissent aux utilisateurs. Pour chaque image significative, rédigez un texte alt descriptif afin que les utilisateurs qui ne peuvent pas voir les visuels comprennent tout de même votre message ou votre appel à l’action.

Évitez les images contenant du texte

Dans la mesure du possible, évitez de placer du texte à l’intérieur des images : les lecteurs d’écran ne peuvent pas lire le texte intégré dans une image, et les utilisateurs ne peuvent pas facilement ajuster la taille ou la couleur de la police pour une meilleure visibilité. Voici quelques conseils :

  • Supprimez le texte lorsque c’est possible : Déplacez tout texte descriptif ou promotionnel de l’image vers un champ de texte dans votre message. Ainsi, les utilisateurs peuvent le redimensionner ou le recolorer selon leurs besoins à l’aide des préférences de leur appareil ou navigateur.
  • Testez la lisibilité et le contraste : Si vous devez conserver du texte dans l’image, suivez les bonnes pratiques de contraste des couleurs et utilisez une police de grande taille. Cela signifie que le texte doit être d’au moins 18 points (environ 24 pixels) pour le texte non gras ou 14 points (environ 18 pixels) s’il est en gras. L’utilisation de ces tailles aide le texte à rester lisible sans forcer les utilisateurs à zoomer, et améliore le contraste et la lisibilité globale du contenu. Testez pour confirmer qu’il est toujours lisible sur les petits écrans.
  • Fournissez un texte alt : Pour le texte essentiel qui doit rester dans l’image, incluez un texte alt décrivant les mots.

Lorsque les images contiennent du texte qui ne peut pas être modifié, les utilisateurs malvoyants perdent la flexibilité d’ajuster la lecture. En séparant le texte des images, vous aidez davantage d’utilisateurs à lire et interagir confortablement avec votre message.

Conseils pour rédiger un texte alt

Décrivez ce qui se trouve réellement dans l’image

Les utilisateurs de lecteurs d’écran s’appuient sur le texte alt pour comprendre le contenu ou la fonction d’une image. Évitez le « discours marketing » générique qui ne correspond pas à ce qui est visuellement montré.

Restez bref, mais précis

Un texte alt concis facilite le traitement de l’information par les utilisateurs. Incluez suffisamment de détails pour transmettre l’objectif, mais évitez le superflu. En règle générale, limitez le texte alt à 125 caractères ou moins. Si une description plus longue qu’une brève phrase est nécessaire, envisagez d’utiliser l’une des méthodes de description longue du W3C.

Évitez « image de » ou « photo de »

Les lecteurs d’écran annoncent déjà qu’il s’agit d’une image. Passez directement à la description du sujet.

Reflétez le texte qui apparaît dans l’image

Si une image contient du texte essentiel, intégrez cette information dans le texte alt afin que les utilisateurs ne la manquent pas.

Restez dans le contexte pertinent, sans jargon marketing superflu

Ne surchargez pas le texte alt avec des termes SEO ou des appels à l’action sans rapport direct avec l’image. Apportez de la valeur à ceux qui ne peuvent pas voir l’image.

Considérez l’objectif de l’image

Si une image fonctionne comme un lien ou un appel à l’action, décrivez l’action prévue (« Acheter », « Lien vers », « S’inscrire »), pas seulement le libellé ou le produit affiché.

Si l’image n’a pas d’objectif, indiquez-le également. Les images décoratives, comme les logos, doivent avoir une balise alt vide (alt="") afin que les lecteurs d’écran sachent qu’ils doivent les ignorer. Sans cela, c’est généralement le nom du fichier image qui est lu à la place.

Vidéos

Les vidéos sont engageantes, mais si elles ne sont pas accessibles, vous risquez d’exclure une partie de votre audience. Utilisez les conseils suivants pour rendre votre contenu vidéo plus inclusif :

Fournissez des sous-titres

Incluez des sous-titres avec vos vidéos afin que les utilisateurs puissent suivre les dialogues, les effets sonores et tout autre contenu audio. Les sous-titres aident :

  • Les personnes sourdes ou malentendantes
  • Les spectateurs qui regardent sans le son
  • Les locuteurs non natifs qui préfèrent lire en même temps

Les sous-titres peuvent être activés ou désactivés, permettant aux utilisateurs de choisir ce qui leur convient le mieux.

Fournissez des contrôles de lecture

Assurez-vous que votre vidéo intégrée inclut des contrôles de lecture accessibles, tels que lecture, pause, sourdine et avance, afin que les utilisateurs puissent interagir avec elle de la manière qui leur convient le mieux.

Évitez la lecture automatique

Dans la mesure du possible, évitez de configurer les vidéos pour qu’elles se lancent automatiquement. La lecture automatique peut être déstabilisante ou désorientante pour :

  • Les utilisateurs qui s’appuient sur des lecteurs d’écran ou la navigation au clavier
  • Les personnes sensibles au mouvement
  • Toute personne dans un environnement calme (comme un lieu de travail ou en soirée)

Laissez les utilisateurs choisir quand lancer une vidéo en incluant des contrôles clairs.

Évitez le contenu clignotant ou stroboscopique

N’incluez pas de vidéos avec des effets clignotants ou stroboscopiques, en particulier à haute fréquence. Ceux-ci peuvent déclencher des crises chez les utilisateurs atteints d’épilepsie photosensible et provoquer un inconfort chez d’autres personnes.

Contraste des couleurs

Un contraste de couleur suffisant permet de s’assurer que vos messages sont faciles à lire pour tout le monde, y compris les personnes malvoyantes ou celles qui consultent votre contenu dans des conditions lumineuses ou difficiles. Visez des ratios de contraste conformes aux exigences de niveau AA WCAG 2.2 :

  • Ratio de contraste de 4,5:1 pour le texte normal (corps du texte, boutons et liens)
  • Ratio de contraste de 3:1 pour le texte de grande taille (titres et libellés plus grands)

Vous pouvez tester vos choix de couleurs à l’aide de l’outil de vérification du contraste WebAim.

HTML personnalisé

Si vous utilisez du HTML personnalisé dans vos messages :

  • Utilisez du HTML sémantique. Cela signifie utiliser les éléments HTML appropriés pour leur fonction prévue au lieu de styliser un élément pour qu’il ressemble à un autre. La plupart des éléments HTML disposent de leur propre prise en charge de l’accessibilité intégrée.
  • Pour la langue au niveau du document, lorsque Braze peut ajouter des métadonnées HTML à l’export, consultez Langue d’accessibilité ; le comportement varie selon le canal. Lorsque vous balisez le contenu vous-même, définissez l’attribut lang dans votre HTML pour identifier la langue de votre contenu. Les lecteurs d’écran utilisent différentes bibliothèques sonores pour chaque langue en fonction de la prononciation et des caractéristiques de celle-ci. Si cela n’est pas spécifié, un lecteur d’écran suppose que le contenu est rédigé dans la langue par défaut que l’utilisateur a choisie lors de la configuration du lecteur d’écran. Si le message n’est pas réellement dans la langue par défaut, le lecteur d’écran risque de ne pas prononcer correctement le message.
1

<html lang="en-us">
  • Utilisez les attributs ARIA pour fournir un contexte supplémentaire. Ces attributs fournissent des informations complémentaires aux technologies d’assistance, aidant à clarifier le rôle, l’état ou les propriétés des éléments d’interface qui pourraient autrement être ambigus.

Attributs ARIA

Lorsque vous utilisez du code personnalisé dans les éditeurs Braze, vous pouvez utiliser les Accessible Rich Internet Applications (ARIA) pour fournir une prise en charge supplémentaire de l’accessibilité aux utilisateurs qui s’appuient sur les technologies d’assistance. Les rôles et attributs ARIA aident les lecteurs d’écran à interpréter votre contenu plus clairement, en particulier lorsque vous utilisez des éléments qui ne transmettent pas de signification par eux-mêmes (comme <div> ou <span>).

Voici quelques exemples particulièrement utiles dans le contexte de l’envoi de messages :

aria-label

aria-label ajoute un nom accessible aux éléments qui n’ont pas de texte visible. Si vous utilisez une icône sans texte (comme une corbeille ou un « X » pour fermer), une personne utilisant un lecteur d’écran ne saura pas à quoi elle sert, à moins que vous ne l’étiquettiez. aria-label donne une voix à cette icône.

1
2
3

<button aria-label="Close message">
  <svg ...></svg>
</button>

aria-labelledby

aria-labelledby connecte un élément à quelque chose qui possède déjà un libellé visible. Ainsi, si vous avez une bannière ou une région qui doit être lue à voix haute avec un titre, vous pouvez utiliser aria-labelledby pour indiquer à la technologie d’assistance : « Utilise ce titre là-bas pour nommer cette partie. »

1
2

<h2 id="banner-title">Important Update</h2>
<div role="region" aria-labelledby="banner-title">...</div>

aria-hidden=”true”

aria-hidden="true" masque des éléments aux lecteurs d’écran. C’est utile pour le texte ou les visuels qui ne transmettent pas d’information importante, comme une étincelle, une coche ou un emoji utilisé uniquement à des fins décoratives.

Cela rend l’expérience plus propre pour les utilisateurs de lecteurs d’écran, qui pourraient autrement entendre du contenu redondant ou déroutant. C’est également utile pour masquer des éléments comme le contenu d’un accordéon hors écran qui n’a pas encore été déplié.

1

<span aria-hidden="true">✔️</span>

En général, il est préférable d’utiliser alt="" pour les images décoratives et les icônes plutôt que aria-hidden="true". Bien que le HTML sémantique soit largement pris en charge par tous les lecteurs d’écran et logiciels d’assistance, la prise en charge d’ARIA varie. Même si vous utilisez aria-hidden, vous devriez tout de même inclure un attribut alt vide.

role=”presentation”

role="presentation" indique aux technologies d’assistance d’ignorer les éléments utilisés uniquement pour la mise en page, comme les tableaux de conception. Par exemple, les e-mails utilisent souvent des tableaux uniquement pour aligner les éléments. Sans ce rôle, les lecteurs d’écran pourraient supposer que votre mise en page est un tableau de données et commencer à lire les numéros de lignes et de colonnes.

1

<table role="presentation">...</table>

Les e-mails créés dans l’éditeur d’e-mails par glisser-déposer ont les éléments de présentation automatiquement marqués avec l’attribut ARIA role="presentation".

aria-live=”polite”

aria-live="polite" annonce les mises à jour lorsque le contenu change sans nécessiter d’interaction de l’utilisateur. Utilisez-le lorsque vous affichez des mises à jour dynamiques dans un message, comme des confirmations de réussite, des erreurs ou d’autres notifications.

1

<div aria-live="polite">Your preferences have been saved.</div>

Tests d’accessibilité automatisés

Pour vous aider à identifier et corriger les problèmes d’accessibilité en amont, Braze propose des tests d’accessibilité automatisés dans les domaines suivants :

Ces tests vérifient votre message par rapport aux directives d’accessibilité du contenu web (WCAG), un ensemble de normes techniques internationalement reconnues pour le contenu accessible. Tout problème pouvant être détecté automatiquement est signalé et classé par gravité pour vous aider à prioriser.

Ce que les tests automatisés peuvent et ne peuvent pas détecter

Les tests d’accessibilité automatisés sont un excellent point de départ, mais ils ne peuvent pas tout détecter. Certains problèmes nécessitent une évaluation humaine, en particulier lorsque le contexte ou la conception visuelle joue un rôle dans la façon dont les utilisateurs perçoivent votre e-mail.

Vous pouvez voir certains problèmes marqués comme À vérifier. Ce sont des cas où le vérificateur ne peut pas déterminer avec certitude s’il y a un problème d’accessibilité. Dans ce cas, nous recommandons de les examiner manuellement.

Voici quelques exemples de ce que les outils automatisés ne peuvent pas détecter de manière fiable :

  • Si l’ordre de focus des éléments interactifs suit une séquence logique
  • Si le contenu est entièrement utilisable au clavier, sans nécessiter de souris
  • Si le texte alt décrit de manière significative une image
  • Si les titres sont utilisés correctement pour organiser le contenu
  • Si les liens et les boutons sont clairement étiquetés et faciles à comprendre
  • Si les cibles tactiles sont suffisamment grandes et correctement espacées
  • Si le texte sur les images d’arrière-plan respecte les exigences de contraste des couleurs
  • Si les instructions ou les libellés sont clairs et utiles pour tous les utilisateurs

Ces limitations ne sont pas propres à Braze—elles sont communes à tous les outils de test d’accessibilité automatisés. Les vérifications automatisées ne peuvent pas simuler chaque technologie d’assistance, lecteur d’écran ou besoin utilisateur. C’est pourquoi l’accessibilité n’est pas une vérification ponctuelle—c’est une pratique continue.

Même si votre message passe toutes les vérifications automatisées, il est toujours important de :

  • Examiner attentivement les problèmes signalés, en particulier ceux étiquetés comme À vérifier.
  • Tester manuellement lorsque c’est possible, en particulier pour les modèles de mise en page et d’interaction.
  • Utiliser des outils comme les lecteurs d’écran, la navigation au clavier uniquement et le zoom du navigateur pour simuler différents besoins d’accès.

En combinant les tests automatisés avec une révision manuelle réfléchie, vous détecterez davantage de problèmes potentiels et créerez des campagnes plus inclusives et utilisables pour chaque destinataire.
New Stuff!