Conseils d’accessibilité pour les cartes adaptatives

Les assistants Copilot Studio fonctionnent bien avec des lecteurs d’écran sous Windows, tels que NonVisual Desktop Access (NVDA) et Job Access with Speech (JAWS). Pour optimiser l’accessibilité, considérez ces conseils.

Lecteurs d’écran

En matière d’accessibilité des cartes adaptatives pour les lecteurs d’écran et la navigation au clavier, voici les points essentiels.

• Incluez toujours la propriété « étiquette » : la propriété « Étiquette » est ce que les lecteurs d’écran annoncent lorsqu’un utilisateur place le focus sur un champ. Sans cela, les lecteurs d’écran pourraient simplement dire « modifier le champ » sans contexte. Les lecteurs d’écran ne lisent souvent pas les espaces réservés, qui disparaissent dès que l’utilisateur commence à taper. Par conséquent, évitez de compter sur eux pour faciliter l’accessibilité.

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

• Utilisez « inputStyle » et « style » avec soin : évitez les styles personnalisés qui suppriment les indicateurs de focus. L’anneau de mise au point par défaut est celui sur lequel les utilisateurs du clavier comptent pour savoir où ils se trouvent sur la carte.

• Utilisez les propriétés « isRequired » et « errorMessage » pour les lecteurs d’écran : même pour les champs facultatifs, un « errorMessage » clair aide les lecteurs d’écran à communiquer les retours de validation.

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

• Ordre logique de navigation par tabulation : les cartes adaptatives suivent l’ordre du Document Object Model (DOM) pour la navigation par tabulation ; structurez donc la représentation JSON de votre carte dans l’ordre dans lequel vous souhaitez que les utilisateurs naviguent par tabulation. Évitez d’utiliser des mises en page « ColumnSet » qui créent un ordre logique visuel mais un ordre de tabulation confus pour les utilisateurs de clavier.

• Les boutons d’action sont accessibles par défaut au clavier : des propriétés telles que « Action.Submit » et « Action.OpenURL » peuvent recevoir le focus nativement. Assurez-vous que votre titre est précis plutôt qu’un libellé vague comme « Cliquez ici », car les lecteurs d’écran lisent le titre à voix haute.

• Ajoutez « type » : « TextBlock » pour les instructions : si une section de champs optionnels nécessite un contexte, définissez « type » comme « TextBlock » avant ces champs. Les lecteurs d’écran parcourent successivement les champs, donnant aux utilisateurs le contexte dont ils ont besoin avant d’atteindre les zones de saisie.

  {
    "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 sautent complètement les éléments cachés. Si l’accessibilité est la priorité, gardez les champs optionnels visibles. Si vous devez les masquer, assurez-vous que le bouton bascule comporte une étiquette claire et descriptive.

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

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

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

La propriété « étiquette »

La propriété « Étiquette » est essentielle pour les lecteurs d’écran. En ayant une connexion entre les étiquettes et les entrées, les bibliothèques de rendu 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 à l’intérieur des cartes adaptatives.

Pour en savoir plus, consultez Input.Text.

Pourquoi « Étiquette » est-il préférable à « espace réservé » pour l’accessibilité ?

Nous recommandons d’utiliser la propriété « Étiquette » pour taguer les paramètres d’entrée des cartes adaptatives, au lieu de la propriété « espace réservé ». C’est une manière simple et concise de nommer les champs à l’usage des auteurs de cartes.

L’utilisation des propriétés « TextBlock » comme libellés empêche d’assurer la proximité entre les champs de saisie et leurs libellés. En utilisant la propriété « Étiquette », vous pouvez vous assurer que les deux éléments visuels sont rendus côte à côte, ce qui aide les utilisateurs ayant besoin de la Loupe.

Découvrez-en davantage dans Validation des entrées.

Utilisez « errorMessage » pour un retour de validation

La propriété « errorMessage » est disponible pour tous les types d’entrée afin de spécifier le message à afficher lorsque l’utilisateur saisit une valeur non valide.

Découvrez-en davantage dans Validation des entrées.

TextBlock avec « style » : « En-tête » pour la structure d’accessibilité

Lorsque vous appliquez « style » : « En-têtes », le style de titre par défaut est appliqué et l’élément TextBlock est marqué comme un en-tête pour l’accessibilité.

En savoir plus sur TextBlock.

Boutons d’action — « infobulle » 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.

Pour en savoir davantage, consultez Action.ToggleVisibility.

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

Les éléments d’entrée avec validation doivent rester visibles. Les éléments d’entrée avec validation, lorsqu’ils sont utilisés avec « Action.ToggleVisibility », peuvent entraîner une confusion lorsque les paramètres d’entrée cachés ne sont pas valides.

Pour en savoir davantage, consultez Action.ToggleVisibility.

La propriété « labelPosition » d’Input.ChoiceSet

Pour « Input.ChoiceSet », la propriété « labelPosition » détermine la position de l’étiquette, soit sur la même ligne, soit placée au-dessus (par défaut).

Pour en savoir plus, consultez Input.ChoiceSet.