Comment rendre vos Campagnes Accessibles ?

Chez Qualifio, nous nous engageons à fournir des fonctionnalités accessibles afin de vous permettre de créer des campagnes pouvant être appréciées par tous, y compris les personnes en situation de handicap.

Cette FAQ est organisée en sections logiques pour vous aider à couvrir chaque aspect de l'accessibilité, étape par étape.

Accessibilité dès la conception

Nous avons développé des fonctionnalités qui améliorent l'accessibilité par défaut, avec un minimum d'efforts nécessaires de votre part.

Cependant, certains aspects dépendent du contenu et des réglages que vous choisissez. Suivez nos recommandations ci-dessous pour rendre votre campagne plus inclusive.

 

Accessibilité du Contenu

Contenu textuel et Structure

  • Evitez les acronymes non expliqués
  • Utilisez un langage simple et concis
  • Respectez la hiérarchie correcte des textes :
    • Titre : En-tête principal de votre campagne
    • Sous-titre : Sous-sections ou titres thématiques
    • Paragraphe : Texte standard

Une structure claire aide les lecteurs d'écran à naviguer logiquement dans votre contenu.

 

Contenu média (vidéo & audio)

Si vous intégrez ou liez des fichiers médias dans votre campagne :

  • Fournissez des contrôles de lecture (lecture, pause, volume)
  • Evitez la lecture automatique, ou proposez un moyen clair de la stopper
  • Ajoutez des sous-titres pour les vidéos
  • Fournissez une transcription pour les fichiers audio

 

Texte alternatif (ALT) pour les images

  • Ajoutez un texte alternatif pertinent aux images porteuses d'informations (ex.: images-réponses, bannières informatives, ...)
  • Laissez le texte alternatif vide pour les images décoratives ou non essentielles

Par exemple :

✅ A faire ❌ A éviter

✅ Fournir une description utile pour les images pertinentes

❌ Ajouter des descriptions inutiles comme "image" ou "photo"

✅ Laisser vide la description des images décoratives

❌ Décrire des images décoratives

 

Accessibilité Visuelle

Contraste des couleurs

Assurez un contraste suffisant pour garantir la lisibilité.

Type de texte Ratio de contrast min.
Texte normal 4.5:1
Texte large (titres, en-têtes, ...) 3:1

Ces ratios garantissent que les utilisateurs ayant une déficience visuelle puissent lire le texte confortablement.

Nous recommandons de tester vos couleurs avec l'outil gratuit en ligne: Colour contrast checker.

✅ Contraste bien choisi : ratio de 13.89 et tous les standards d'accessibilité sont respectés

❌ Contraste mal choisi : ratio de 1.46 et les standards d'accessibilité ne sont pas atteints

 

 

Unités relatives (rem, %, vw, vh)

Utilisez des unités relatives pour que votre design s'adapte à toutes les tailles d'écran.

  • Pour le texte, utilisez rem afin d'assurer la mise à l'échelle lors que les utilisateurs ajustent la taille de la police dans leur navigateur
  • Pour les conteneurs, préférez %, vw, and vh à la place des valeurs fixes en px (pixels)

Pour plus de bonnes pratiques sur le design responsive, consultez notre FAQ dédiée à la personnalisation du style de vos campagnes.For more best practices on responsive design, see our dedicated FAQ page on Styling your campaigns.

La taille de police se met à jour directement via les préférences de l'utilisateur dans son navigateur, s'assurant qu'ils puissent lire le contenu facilement.

 

Couleur de contour

  • Définissez une couleur de contour visible pour les boutons et éléments interactifs dans les paramètres du Look&Feel. Assurez un contraste suffisant entre la couleur d'arrière-plan et la couleur du contour. 
  • Cela permet aux utilisateurs naviguant au clavier de voir clairement où ils se trouvent sur la page.

 

Evitez les indicateurs basés uniquement sur la couleur

Les composants natifs de Qualifio sont déjà conçus pour respecter les standards d'accessibilité. Evitez de modifier ou d'écraser ces styles par défaut.

Si vous ajoutez du code personnalisé ou modifiez des éléments visuels, veillez à respecter les bonnes pratiques suivantes :

  • Ne comptez pas uniquement sur la couleur pour transmettre une information
  • Associez la couleur à un texte et/ou une icône pour plus de clarté

Il n'est pas possible de distinguer les bonnes et les mauvaises réponses si vous ne voyez pas. toutes les couleurs

 

Paramètres techniques d'accessibilité

Nom public

Qualifio propose désormais un champ Nom public dans la première étape de création de la campagne. C'est un moyen simple et efficace de définir les titres de campagnes pour l'accessibilité et les intégrations. Si vous ne définissez pas de nom public, le système utilisera automatiquement le titre interne de la campagne.

En savoir plus : Qu'est-ce que le champ "Nom public" ?

Ce qu'il fait :

  • Définit le titre public de votre campagne (non visible pour les participants, sauf si vous le configurez comme tel dans le Look&Feel)
  • Met automatiquement à jour :
    • Le champ Viralité > Contenu général > Titre 
    • Le méta-titre du minisite
    • L'attribut titre des campagnes intégrées (iframe, AMP, Javascript, flux de campagnes, ...)

Pourquoi ce camp est important ?

Il garantit que les lecteurs d'écrans annoncent un titre clair et déscriptif, donnant du contexte à tous es utilisateurs. Il améliore le référencement SEO via le méta-titre des minisites. 

Cela réduit les efforts manuels et assure une cohérence entre tous les canaux d'intégration.

Métadonnées dans les minisites

En renseignant le Nom public, le méta-titre du minisite est automatiquement généré. Vous n'avez plus besoin de le définir manuellement dans le Look&Feel, sauf si vous souhaitez le remplacer.

 

Méthodes d'intégration (iframe, JavaScript, AMP, ...)

Lorsque vous intégrez une campagne :

  • Le Nom public définit automatiquement l'attribut titre de l'iframe pour les lecteurs d'écran
  • Si aucun Nom public n'est défini, votre titre interne sera utilisé comme solution de repli

Assurez-vous que ce titre reste descriptif et cohérent, car il permet aux utilisateurs dépendants des lecteurs d'écran de comprendre le contexte de la campagne et de s'y engager.

 

Toggle d'accessibilité

Pour les formats compatibles, l'activation du mode accessible optimise l'expérience pour les utilisateurs de technologies d'assistance. Consultez notre FAQ dédiée pour savoir comment l'activer et rendre vos campagnes plus conformes aux exigences d'accessibilité.

 

Testez l'accessibilité de votre campagne

Avant de mettre votre campagne en ligne, nous vous recommandons de tester les points suivants :

Navigation au clavier

  • Vérifier que tous les éléments sont accessibles via Tab, Flèches, and Enter
  • Assurez-vous qu'un état de focus visible apparait sur l'élément sélectionné
  • Evitez les pièges au clavier où l'utilisateur ne peut pas quitter une modale ou un overlay (il doit toujours y avoir une action, bouton "Fermer", envoi de données, ...)

Compatibilité avec les lecteurs d'écran

Utilisez un lecteur d'écran pour confirmer la lecture correcte de votre campagne, y compris l'ordre de lecture et les textes alternatifs :

  • Mac/iPhone: VoiceOver
  • Windows: JAWS (le plus courant) or NVDA
  • Android: TalkBack

Accessibilité des couleurs

Assurez-vous que votre contenu reste compréhensible, même pour les personnes atteintes de déficience visuelle liée aux couleurs.

Pour simuler le daltonisme sur votre appareil :

  • Windows:
    • Ouvrez Paramètres > Accessibilité > Filtres de couleurs et activez-le
    • Choisissez un filtre correspondant à un type de déficience
    • Optionnellement : activez le raccourci Win + Ctrl + C pour activer/désactiver rapidement le filtre
  • Mac:
    • Allez dans Réglages Système > Accessibilité > Ecran > Filtres de couleur et activez-le
    • Choisissez le filtre correspondant au type de déficience à simuler
Cet article vous a-t-il été utile ?

Can’t find the answer you need?

Send us a question and connect with an expert to get personal assistance.

Contact support

Vous ne trouvez pas les réponses que vous cherchez ?

Nous sommes là pour vous aider. Envoyez-nous une demande en direct !

Contacter le support