Conseils d’accessibilité pour les cartes adaptatives

Les agents Copilot Studio fonctionnent bien avec des lecteurs d’écran sur Windows, tels que NonVisual Desktop Access (NVDA) et Job Access with Speech (JAWS). Pour optimiser l’accessibilité, tenez compte de ces conseils.

Lecteurs d’écran

Pour l’accessibilité du lecteur d’écran et du clavier des cartes adaptatives, voici ce qui importe le plus.

• Incluez toujours la propriété « label » : la propriété « label » est ce que les lecteurs d’écran annoncent lorsqu’un utilisateur se concentre sur une entrée. Sans cela, les lecteurs d’écran peuvent simplement dire « modifier le champ » sans contexte. Les lecteurs d’écran ne lisent souvent pas les espaces réservés et disparaissent une fois que l’utilisateur commence à taper. Par conséquent, évitez de s’appuyer sur eux pour faciliter l’accessibilité.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "placeholder": "Enter your middle name"
  }
  

• Utilisez « inputStyle » et « style » de manière réfléchie : évitez les styles personnalisés qui suppriment les indicateurs de focus. L’anneau de focus par défaut est ce sur quoi les utilisateurs du clavier comptent pour se repérer sur la carte.

• Utilisez « isRequired » et « errorMessage » pour les lecteurs : même pour les champs facultatifs, un « errorMessage » clair permet aux lecteurs d’écran de communiquer les commentaires de validation.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "isRequired": false,
    "errorMessage": "Please enter a valid middle name"
  }
  

• Ordre de tabulation logique : les cartes adaptatives suivent l’ordre du DOM (Document Object Model) pour la navigation par onglets. Structurez la représentation JSON de votre carte dans l’ordre souhaité pour le passage d'un onglet à l'autre par les utilisateurs. Évitez d’utiliser des dispositions « ColumnSet » qui créent un ordre logique visuel, mais un ordre de tabulation confus pour les utilisateurs du clavier.

• Les boutons d’action sont accessibles au clavier par défaut : les propriétés telles que « Action.Submit » et « Action.OpenUrl » peuvent être focalisées nativement. Assurez-vous que votre titre est descriptif plutôt que quelque chose de vague comme « Cliquez ici », car les lecteurs d’écran lisent le titre à haute voix.

• Ajoutez « type » : « TextBlock » pour obtenir des instructions : si une section de champs facultatifs a besoin de contexte, définissez « type » comme « TextBlock » avant ces champs. Les lecteurs d’écran lisent les champs en séquence, ce qui donne aux utilisateurs le contexte dont ils ont besoin avant d’atteindre les entrées.

  {
    "type": "TextBlock",
    "text": "The following fields are optional. You can skip them if not applicable.",
    "wrap": true
  }
  

• Évitez « isVisible » : « false » pour les scénarios d’accessibilité : les lecteurs d’écran ignorent entièrement les éléments masqués. Si l’accessibilité est la priorité, conservez les champs facultatifs visibles. Si vous devez les masquer, assurez-vous que le bouton bascule comporte une étiquette claire et descriptive.

• Conseil professionnel pour les tests dans Microsoft Teams : en raison de légères différences dans la prise en charge de Microsoft Teams pour les cartes adaptatives, nous vous recommandons d’utiliser le Narrateur Windows intégré ou NVDA pour valider l’ordre de tabulation et que les annonces fonctionnent comme prévu.

Propriétés de schéma spécifiques

Voici quelques propriétés spécifiques dans le schéma cartes adaptatives qui peuvent aider à améliorer l’accessibilité.

Propriété « label »

La propriété « label » est essentielle pour les lecteurs d’écran. En ayant une connexion entre les étiquettes et les entrées, les bibliothèques de renderer peuvent définir les propriétés nécessaires pour permettre aux utilisateurs de technologies d’assistance, telles que les lecteurs d’écran, d’interagir correctement avec les entrées dans les cartes adaptatives.

En savoir plus dans Input.Text.

Pourquoi « label » surpasse « placeholder » pour l’accessibilité ?

Nous vous recommandons d’utiliser la propriété « label » pour marquer les paramètres d’entrée de cartes adaptatives, au lieu de la propriété « placeholder ». Il s’agit d’un moyen simple et concis d’étiqueter les entrées pour les auteurs de cartes.

L’utilisation des propriétés « TextBlock » comme étiquettes vous empêche d’appliquer la proximité entre les entrées et les étiquettes. En utilisant la propriété « label », vous pouvez vous assurer que les deux éléments visuels sont affichés côte à côte, ce qui aide les utilisateurs qui ont besoin de logiciels de zoom.

En savoir plus sur la validation d’entrée.

Utiliser « errorMessage » pour les commentaires de validation

La propriété « errorMessage » est disponible pour tous les types d’entrée afin de spécifier le message à afficher lorsqu’un utilisateur entre une valeur qui n’est pas valide.

En savoir plus sur la validation d’entrée.

TextBlock avec « style » : « titre » pour la structure d’accessibilité

L’utilisation de « style » : « heading » applique le style de titre par défaut et marque l’élément TextBlock comme titre d’accessibilité.

En savoir plus dans l’élément TextBlock.

Boutons d’action - « info-bulle » pour la narration

L’action « Action.ToggleVisibility » prend en charge une propriété « info-bulle » qui définit le texte qui apparaît lorsque l’utilisateur pointe la souris sur l’action. Le logiciel de narration lit ce texte.

En savoir plus dans Action.ToggleVisibility.

Attention avec « isVisible » : « false » pour les éléments d’entrée

Conservez les éléments d’entrée avec la validation visible. Les éléments d’entrée avec validation sous « Action.ToggleVisibility » peuvent générer une confusion lorsque les paramètres d’entrée masqués ne sont pas valides.

En savoir plus dans Action.ToggleVisibility.

Propriété « labelPosition » pour Input.ChoiceSet

Pour « Input.ChoiceSet », la propriété « labelPosition » détermine la position de l’étiquette, inline ou supérieure (valeur par défaut).

En savoir plus dans Input.ChoiceSet.