Visibilité sur le site Web/l’application

Visibilité sur le site Web/l’application Fonctionnalités d’accessibilité

Les projets Website / App Insights ont de nombreuses fonctionnalités intégrées pour rendre l’accessibilité sans effort. Voici quelques-unes des fonctionnalités d’accessibilité que vous pouvez vous attendre à trouver sur la plateforme :

• Tous les éléments du Creative sont tabulables et cliquables via le clavier. Nous prenons en charge TAB, ESC et Enter (et return, pour les utilisateurs Mac), mais ne prenons pas en charge les touches de direction ou autres.
• Pour les créatifs Pop-over et Dialogue réactif, les utilisateurs ne peuvent pas ouvrir d’onglets en dehors du Creative tant qu’il n’est pas fermé. De plus, il n’autorise pas les tabulations dans la page sous-jacente.
• Pour les créatifs Pop-over et Dialogue réactif, la zone activée est appliquée directement au Creative une fois qu’il est affiché.
• Si des cibles intégrées sont utilisées, les utilisateurs peuvent cliquer avec le bouton droit de la souris sur la cible intégrée et ajouter un titre iFrame.
• Si des fenêtres intégrées sont utilisées dans les options avancées de l’Intercept, les utilisateurs peuvent ajouter un titre iFrame.

Ensuite, nous aborderons les fonctionnalités d’accessibilité propres aux besoins de la conception de chaque Creative.

Créatif de dialogue réactif

• Facile à définir Texte Alt : si une icône personnalisée est utilisée dans la boîte de dialogue, nous autorisons les utilisateurs à spécifier Texte Alt pour indiquer le texte que le lecteur d’écran doit lire lorsque la zone activée est sur l’icône.
  Astuce Qualtrics : si vous sélectionnez Inclure une icône pour ignorer l’intercept, le texte alternatif du bouton X qui apparaît en haut à droite du Creative est « Fermer ». Ce texte alternatif est également localisé.
• Étiquettes ARIA pour les commandes de boutons : Par défaut, les lecteurs d’écran liront le texte que vous précisez pour l’étiquette du bouton. Cependant, dans certains cas, vous pouvez souhaiter que le lecteur d’écran lise un contexte supplémentaire, comme “Cliquez sur ce bouton pour ouvrir une nouvelle fenêtre d’enquête”. Dans ce cas, vous pouvez indiquer le descripteur ARIA pour les commandes de boutons de commande.
• Les contrastes de couleur pour les éléments du Creative lui-même : bien que Qualtrics ne puisse pas fournir de conseils de contraste direct, les utilisateurs ont tout le contrôle pour choisir et choisir la couleur appropriée pour les éléments du Creative.

Creative Bouton de commentaires

• Titres Iframe : Possibilité de spécifier un titre iFrame dans la section Animation.
• Texte alternatif du bouton personnalisé : possibilité d’indiquer un texte alternatif pour une image si un bouton personnalisé est utilisé.

Pop-over, Curseur, Barre d’informations et Créatifs de feedback intégrés personnalisés

• Les contrastes de couleur pour les éléments du Creative lui-même : bien que Qualtrics ne puisse pas fournir de conseils de contraste direct, les utilisateurs ont tout le contrôle pour choisir et choisir la couleur appropriée pour les éléments du Creative.

SDK de l’application mobile

• Accessible aux lecteurs d’écran mobiles :
  • Permet aux lecteurs d’écran de naviguer facilement et de quitter la boîte de dialogue.
  • Permet de lire le texte dans les boutons et également le type de l’élément (par exemple, bouton).

Création d’un Creative accessible avec dialogue réactif

Cette section explique comment modifier un créatif de dialogue réactif afin qu’il soit accessible aux lecteurs d’écran.

1. Accédez à la page « Projects » (Projets), puis créez un projet « Website / App Insights » (Informations sur le site Web/l’application).
2. Cliquez sur Créer.
   
3. Sélectionner Dialogue réactif comme type d’intercept.
   
4. Nommez votre intercept.
   
5. Sélectionnez une enquête à lier ou saisissez une URL personnalisée vers laquelle diriger.
6. Cliquez sur Suivant.
7. Sélectionnez Boutons.
   
8. Insérez le texte approprié pour chacun des boutons de la section Texte. Ce texte s’affichera visuellement pour les utilisateurs et sera lu à haute voix par les lecteurs d’écran.
9. Cliquez sur Logos & images.
   
10. Modifiez la section Texte alternatif pour fournir une description écrite du graphique. Les visiteurs qui utilisent des lecteurs d’écran auront le texte alt lu pour qu’ils sachent ce qu’est l’image s’ils sont malvoyants.
11. Si vous affichez votre enquête directement dans la boîte de dialogue, accédez à Taille & Style.
12. Cochez la case Afficher l’enquête directement dans la boîte de dialogue.
13. Dans la zone de titre Iframe, saisissez le texte que vous souhaitez lire par les lecteurs d’écran lorsqu’ils rencontrent votre enquête pour la première fois.

Création d’un Creative de bouton de feedback accessible

1. Accédez à la page « Projects » (Projets), puis créez un projet « Website / App Insights » (Informations sur le site Web/l’application).
2. Cliquez sur Créer.
   
3. Sélectionner Bouton d’avis comme type d’intercept.
   
4. Nommez votre intercept.
   
5. Sélectionnez une enquête à lier ou saisissez une URL personnalisée vers laquelle diriger.
6. Cliquez sur Suivant.
7. Accédez à Look & Feel.
   
8. Insérez le texte approprié pour les boutons dans la section Texte du bouton. Ce texte s’affichera visuellement pour les utilisateurs et sera lu à haute voix par les lecteurs d’écran.
9. Si vous utilisez un bouton personnalisé, sélectionnez Utiliser mon propre bouton et téléchargez l’image appropriée depuis votre ordinateur.
10. Une fois l’image chargée, modifiez le texte Alt pour fournir une description écrite du bouton. Les visiteurs qui utilisent des lecteurs d’écran auront le texte alt lu pour qu’ils sachent ce qu’est l’image s’ils sont malvoyants.
    
11. Cliquez sur Affichage de l’enquête.
    
12. Spécifiez un titre iframe dans la section de titre Iframe. Si vous avez ajouté une cible intégrée à votre intercept, cette option ajoutera un titre à l’iFrame que les lecteurs d’écran peuvent interpréter.

Ajout d’un texte alternatif et de rôles aux boutons cibles

Si votre cible se présente sous la forme d’une image de bouton que vous avez chargée, l’ajout d’un texte alternatif et d’un attribut de rôle aide le lecteur d’écran à comprendre ce que le bouton est censé dire et faire.

1. Ouvrez votre Creative dans l’onglet Creatives.
2. Double-cliquez sur l’élément Cible contenant l’image.
   
3. Cliquez sur Source.
4. Dans la<img> balise, ajoutez un attribut<img alt="text here" /> alt à la balise et définissez la valeur égale au texte de l’image.

   <img alt="Sign Up Now" ... />

   Astuce Qualtrics : le logiciel de lecture d’écran lira à haute voix ce qui est contenu dans l’attribut alt lorsqu’il arrivera à l’image.

   

5. Entourez la<img> balise d’une<span> balise.
   
6. Ajoutez un attribut role=”bouton” à la<span> balise.

   <span role="button"><img .../></span>

   Astuce Qualtrics : l’attribut de rôle indique au visiteur, à l’aide d’un lecteur d’écran, que cet élément est un bouton qui peut être activé.

   

Cibles standard (texte de lien)

1. Ouvrez votre Creative dans l’onglet Creatives.
2. Double-cliquez sur l’élément cible qui contient le texte.
   
3. Cliquez sur Source.
4. Ajoutez un attribut role=”bouton” à la<span> balise.

   <span role="button" ... >Contenu de la zone de texte</span>

   

Ajout d’un texte alternatif et de rôles pour fermer les boutons

Bouton Fermer comme image

1. Ouvrez votre Creative dans l’onglet Creatives.
2. Double-cliquez sur l’élément Close contenant l’image.
   
3. Cliquez sur Source.
4. Ajoutez l’attribut alt=”close” à la<img> balise.

   <img alt="close" ... />

   Astuce Qualtrics : le logiciel de lecture d’écran lira à haute voix ce qui est contenu dans l’attribut alt lorsqu’il arrivera à l’image.

   

5. Entourez la<img> balise d’une<span> balise.
   
6. Ajoutez un attribut role=”bouton” à la<span> balise.

   <span role="button"><img .../></span>

   Astuce Qualtrics : l’attribut de rôle indique au visiteur, à l’aide d’un lecteur d’écran, que cet élément est un bouton qui peut être activé.

   

Bouton Fermer comme texte

1. Ouvrez votre Creative dans l’onglet Creatives.
2. Double-cliquez sur l’élément Close contenant le texte.
   
3. Cliquez sur Source.
4. Ajoutez un attribut role=”bouton” à la<span> balise.

   <span role="button" ...>Contenu de la zone de texte</span>

   Astuce Qualtrics : l’attribut de rôle indique au visiteur, à l’aide d’un lecteur d’écran, que cet élément est un bouton qui peut être activé.

   

FAQ