Accessibilité des sites web / App Insights

Fonctionnalités d’Accessibilité du Site Web / App Insights

Les projets Website Insights intègrent de nombreuses fonctions qui facilitent l’accessibilité. Nous vous recommandons notamment d’essayer un dialogue réactif ou un bouton de rétroaction, qui ont été conçus en tenant compte de l’accessibilité.

Sur cette page, nous aborderons les paramètres spécifiques et les meilleures pratiques pour améliorer l’accessibilité de votre projet Website Insights.

Création d’un dialogue réactif accessible

Les
dialogues réactifs sont des superpositions de sites web qui ont été développées en tenant compte de l’accessibilité. Nous allons surligner ci-dessous quelques-unes des fonctions d’accessibilité que vous pouvez vous attendre à trouver :

• Facilité de définition du texte Alt : Si une icône personnalisée est utilisée dans la boîte de dialogue, nous permettons aux utilisateurs de spécifier le texte Alt pour indiquer le texte que le lecteur d’écran doit lire lorsque le focus est sur l’icône.
  Astuce : Si vous choisissez d’inclure une icône pour fermer l’intercept, le texte alt pour le bouton X qui apparaît en haut à droite de la boîte de dialogue est “fermer” Ce texte est également localisé.
• Étiquettes ARIA pour les contrôles de bouton : Par défaut, les lecteurs d’écran liront le texte que vous spécifiez pour l’étiquette du bouton. Toutefois, dans certains cas, vous pouvez souhaiter que le lecteur d’écran lise un contexte supplémentaire, tel que “Cliquez sur ce bouton pour ouvrir une nouvelle fenêtre d’enquête.” Dans ce cas, vous pouvez spécifier l’étiquette ARIA pour les contrôles de bouton.
• Titres iframe pour les enquêtes intégrées : Si vous souhaitez intégrer une enquête dans votre dialogue, il est facile d’ajouter un titre iframe pour les lecteurs d’écran.
• Contrastes de couleur pour les éléments du Créatif lui-même : Bien que Qualtrics ne puisse pas fournir d’indications directes sur les contrastes, vous pouvez ajuster la couleur des boutons et du texte de votre dialogue en fonction de vos besoins.

Créer un bouton de retour d’information accessible Créatif

Les Onglets
d’avis sont des onglets sur la côte d’une page sur lesquels un utilisateur peut cliquer pour laisser un avis. Voici quelques fonctions d’accessibilité du bouton de retour d’information :

• Titres des iframes : Possibilité de spécifier un titre d’iframe dans la section Animation.
• Texte Alt personnalisé pour les boutons : Par défaut, les lecteurs d’écran lisent le texte que vous spécifiez pour l’étiquette du bouton. Toutefois, dans certains cas, vous pouvez utiliser une image personnalisée pour votre bouton. Dans ce cas, vous pouvez spécifier un texte alt pour l’image du bouton.
• Titres iframe pour les enquêtes intégrées : Si vous souhaitez intégrer une enquête dans votre dialogue, il est facile d’ajouter un titre iframe pour les lecteurs d’écran.
• Contrastes de couleur pour les éléments du Créatif lui-même : Bien que Qualtrics ne puisse pas fournir d’indications directes sur les contrastes, vous pouvez ajuster la couleur de l’arrière-plan et du texte de votre bouton selon vos besoins.

Ajout d’un texte Alt et de rôles aux boutons Cible pour les Créatifs en héritage

Si votre Cible se présente sous la forme d’une image de bouton que vous avez téléchargée, l’ajout d’un texte alt et d’un attribut role aide le lecteur d’écran à comprendre ce que le bouton est censé dire et faire. Ce conseil s’adresse aux créatifs traditionnels, comme le pop-over ou l’infobar.

1. Ouvrez votre Créatif dans l’onglet Créatifs.
2. Double-cliquez sur l’élément Cible qui contient l’image.
   
3. Cliquez sur Source.
4. À l’intérieur de la balise <img>, ajoutez un attribut alt <img alt="text here" /> à la balise et définissez la valeur égale au texte de l’image.

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

   Astuce: Les logiciels de lecture d’écran lisent à haute voix le contenu de l’attribut alt lorsqu’ils arrivent sur l’image.

   

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

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

   Astuce: L’attribut role indique au visiteur utilisant un lecteur d’écran que cet élément est un bouton qui peut être activé.

   

Cibles standard (texte du lien)

1. Ouvrez votre Créatif dans l’onglet Créatifs.
2. Double-cliquez sur l’élément Cible qui contient le texte.
   
3. Cliquez sur Source.
4. Ajoutez un attribut role=”button” à la balise <span>.

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

   

Ajout d’un texte Alt et de rôles aux boutons de fermeture pour les créatifs patrimoniaux

Les créatifs hérités du passé, comme les pop-over et les curseurs, nécessitent une personnalisation supplémentaire pour rendre leurs boutons de fermeture accessibles.

Bouton de fermeture en tant qu’image

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

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

   Astuce: Les logiciels de lecture d’écran lisent à haute voix le contenu de l’attribut alt lorsqu’ils arrivent sur l’image.

   

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

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

   Astuce: L’attribut role indique au visiteur utilisant un lecteur d’écran que cet élément est un bouton qui peut être activé.

   

Bouton de fermeture en tant que texte

1. Ouvrez votre Créatif dans l’onglet Créatifs.
2. Double-cliquez sur l’élément Close qui contient le texte.
   
3. Cliquez sur Source.
4. Ajoutez un attribut role=”button” à la balise <span>.

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

   Astuce: L’attribut role indique au visiteur utilisant un lecteur d’écran que cet élément est un bouton qui peut être activé.

   

FAQ