Utilisation de Speech pour appeler des éléments d’interface utilisateur

  • Article

Le shell Compatible voix (VES) est une extension de la plateforme Windows Speech. Elle propose une expérience vocale de première classe dans les applications, ce qui permet aux utilisateurs d’utiliser leur voix pour appeler des contrôles à l’écran et d’insérer du texte en le dictant. VES s’efforce de fournir une expérience visuelle et vocale de bout en bout, commune sur tous les shells et appareils Windows, et nécessite peu d'efforts de la part des développeurs d’applications. Pour ce faire, il tire parti de la plateforme Microsoft Speech et de l’infrastructure UI Automation (UIA).

Expérience utilisateur pas à pas

Voici une vue d’ensemble de ce que pourrait faire un utilisateur avec VES sur Xbox. Cela devrait vous aider à définir le contexte avant de vous plonger dans les détails du fonctionnement de VES.

  • L’utilisateur allume la console Xbox et souhaite parcourir ses applications pour trouver quelque qui l’intéresse :

    Utilisateur : « Hey Cortana, ouvre Mes jeux et applications »

  • Le mode d’écoute active (ALM) est activé, ce qui signifie que la console écoute maintenant l’utilisateur et attend qu'il appelle un contrôle visible sur l’écran sans avoir à dire « Hey Cortana » à chaque fois. L’utilisateur peut désormais basculer d'un mode à l'autre pour voir les applications et parcourir la liste des applications :

    Utilisateur : « Applications »

  • Pour faire défiler l’affichage, l’utilisateur peut simplement dire :

    Utilisateur : « Défile vers le bas »

  • L’utilisateur voit l’illustration de l’application qui l'intéresse, mais en a oublié le nom. L’utilisateur demande l’affichage des étiquettes de conseil vocal :

    Utilisateur : « Affiche les étiquettes »

  • Une fois que l'utilisateur sait ce qu'il doit dire, l’application peut être lancée :

    Utilisateur : « Films et TV »

  • Pour quitter le mode d’écoute active, l’utilisateur indique à la Xbox d’arrêter l’écoute :

    Utilisateur : « Arrête l’écoute »

  • Plus tard, une nouvelle session d’écoute active peut être démarrée en disant :

    Utilisateur : « Hey Cortana, effectue une sélection » ou « Hey Cortana, sélectionne »

Dépendance d'automatisation de l'interface utilisateur

VES est un client UI Automation et s’appuie sur des informations exposées par l’application via ses fournisseurs UI Automation. Il s’agit de la même infrastructure déjà utilisée par la fonctionnalité Narrateur sur les plateformes Windows. UI Automation permet l’accès par programme aux éléments d’interface utilisateur, notamment le nom du contrôle, son type et les modèles de contrôle qu’il implémente. À mesure que l’interface utilisateur change dans l’application, VES réagit aux événements UIA de mise à jour et analyse à nouveau l’arborescence UI Automation mise à jour pour rechercher tous les éléments actionnables. Ces informations servent ensuite à générer une grammaire de reconnaissance vocale.

Toutes les applications UWP ont accès à l’infrastructure UI Automation et peuvent afficher des informations sur l’interface utilisateur indépendante de l’infrastructure graphique sur laquelle elles sont basées (XAML, DirectX/Direct3D, etc.). Dans certains cas, comme pour XAML, la tâche est majoritairement effectuée par l’infrastructure, ce qui considérablement le travail nécessaire pour prendre en charge le Narrateur et VES.

Pour plus d’informations sur UI Automation, veuillez consulter Notions de base d’UI Automation.

Nom de l’appel de contrôle

VES utilise l’heuristique suivante pour déterminer l’expression à inscrire dans le module de reconnaissance vocale comme nom du contrôle (par exemple, ce que l’utilisateur doit dire pour appeler le contrôle). Il s’agit également de l’expression qui s’affiche dans l’étiquette de conseil vocal.

Source du nom dans l’ordre de priorité :

  1. Si l’élément a une propriété LabeledBy jointe, VES utilise le AutomationProperties.Name de cette étiquette de texte.
  2. AutomationProperties.Name de l’élément. Dans XAML, le contenu texte du contrôle sera utilisé comme valeur par défaut pour AutomationProperties.Name.
  3. Si le contrôle est de type ListItem ou Button, VES recherche le premier élément enfant avec une valeur AutomationProperties.Name valide.

Contrôles actionnables

VES considère qu'un contrôle est actionnable s’il implémente l’un des modèles de contrôle Automation suivants :

  • InvokePattern (par exemple, Button) : représente des contrôles qui initialisent ou exécutent une action unique et non équivoque, et qui ne conservent pas l’état quand ils sont activés.

  • TogglePattern (par exemple, Check Box) : représente un contrôle qui peut parcourir un ensemble d’états et conserver un état une fois défini.

  • SelectionItemPattern (par exemple, Combo Box) : représente un contrôle qui agit comme un conteneur pour une collection d’éléments enfants sélectionnables.

  • ExpandCollapsePattern (par exemple, Combo Box) : représente les contrôles qui s’agrandissent visuellement pour afficher du contenu et se réduisent pour le masquer.

  • ScrollPattern (par exemple, List) : représente des contrôles qui agissent comme conteneurs défilants pour une collection d’éléments enfants.

Conteneurs défilants

Pour les conteneurs défilants qui prennent en charge ScrollPattern, VES écoute les commandes vocales telles que « défile vers la gauche » ou « défile vers la droite », puis appelle Scroll avec les paramètres appropriés lorsque l’utilisateur déclenche l’une de ces commandes. Les commandes de défilement sont injectées en fonction de la valeur des propriétés HorizontalScrollPercent et VerticalScrollPercent. Par exemple, si HorizontalScrollPercent à une valeur supérieure à 0, « défile vers la gauche » est ajoutée, si elle est inférieure à 100, « défile vers la droite » est ajoutée, et ainsi de suite.

Chevauchement du Narrateur

L’application Narrateur est également un client UI Automation et utilise la propriété AutomationProperties.Name comme l’une des sources du texte qu’il lit pour l’élément d’interface utilisateur actuellement sélectionné. Pour proposer une meilleure expérience d’accessibilité, de nombreux développeurs d’applications ont décidé de surcharger la propriété Name avec du texte descriptif long, afin de fournir plus d’informations et de contexte lorsque le Narrateur lit. Toutefois, cela provoque un conflit entre les deux caractéristiques : VES a besoin de phrases courtes semblables ou identiques au texte visible du contrôle, tandis que le Narrateur bénéficie de phrases plus longues et plus descriptives pour donner un meilleur contexte.

Pour résoudre ce problème, le Narrateur a été mis à jour, à partir de Windows 10 Creators Update, pour également examiner la propriété AutomationProperties.HelpText. Si cette propriété n’est pas vide, le Narrateur lira son contenu en plus de AutomationProperties.Name. Si HelpText est vide, le Narrateur lit uniquement le contenu de Name. Cela permet d’utiliser des chaînes descriptives plus longues si nécessaire, mais conserve une expression de reconnaissance vocale plus courte et conviviale dans la propriété Name.

Diagramme illustrant le code derrière le bouton qui inclut AutomationProperties.Name et AutomationProperties.HelpText, indiquant que le shell Compatible voix écoute pour la configuration du nom.

Pour plus d’informations, veuillez consulter Propriétés Automation pour la prise en charge de l’accessibilité dans l’interface utilisateur.

Mode d’écoute active (ALM)

Activer l'ALM

Sur Xbox, VES n’écoute pas constamment les entrées vocales. L’utilisateur doit entrer explicitement en mode d’écoute active en disant :

  • « Hey Cortana, sélectionne » ou
  • « Hey Cortana, effectue une sélection »

Il existe plusieurs autres commandes Cortana qui laissent également l’utilisateur en écoute active une fois la demande terminée, par exemple « Hey Cortana, connecte-toi » ou « Hey Cortana, rentre ».

Activer l'ALM aura l'effet suivant :

  • La superposition Cortana s’affiche dans le coin supérieur droit, indiquant à l’utilisateur qu’il peut dire ce qu’il voit. Pendant que l’utilisateur parle, les fragments d’expressions reconnus par le module de reconnaissance vocale sont également affichés à cet emplacement.

  • VES analyse l’arborescence UIA, recherche tous les contrôles actionnables, inscrit leur texte dans la grammaire de reconnaissance vocale et démarre une session d’écoute continue.

    Capture d’écran de l’option « Pour voir les étiquettes, dis

Quitter l'ALM

Le système reste en ALM pendant que l’utilisateur interagit avec l’interface utilisateur en parlant. Il y a deux façons de quitter l'ALM :

  • L’utilisateur dit explicitement : « Arrête l’écoute », ou
  • Il s'écoute 17 secondes suivant l’entrée en ALM ou depuis la dernière reconnaissance positive

Appeler des contrôles

Lorsqu'il est en ALM, l’utilisateur peut interagir avec l’interface utilisateur en parlant. Si l’interface utilisateur est configurée correctement (avec les propriétés Name correspondant au texte visible), l’utilisation de la voix pour effectuer des actions doit être une expérience naturelle et fluide. L’utilisateur doit pouvoir simplement dire ce qu’il voit à l’écran.

Superposition de l’interface utilisateur sur Xbox

Le nom que VES dérive d’un contrôle peut être différent du réel texte visible dans l’interface utilisateur. Cela peut être dû à la propriété Name du contrôle ou à l’élément attaché LabeledBy défini explicitement sur une chaîne différente. Il se peut également que le contrôle n’ait pas de texte d’interface graphique utilisateur (GUI), mais seulement une icône ou un élément image.

Dans ces cas, les utilisateurs ont besoin de voir ce qui doit être dit afin d’appeler un tel contrôle. Par conséquent, une fois en écoute active, les conseils vocaux peuvent être affichés en disant « Affiche les étiquettes ». Cela entraîne l’affichage des étiquettes de conseil vocal sur chaque contrôle actionnable.

Il existe une limite de 100 étiquettes. Par conséquent, si l’interface utilisateur de l’application a plus de 100 contrôles actionnables, certains seront dépourvus d'étiquette. Dans ce cas, les étiquettes choisies ne sont pas déterministes, car elles dépendent de la structure et de la composition de l’interface utilisateur actuelle comme indiqué dans l’arborescence UIA.

Une fois que les étiquettes de conseil vocal sont affichées, il n’existe aucune commande pour les masquer, elles restent visibles jusqu’à ce que l’un des événements suivants se produise :

  • L’utilisateur appelle un contrôle
  • L’utilisateur quitte la scène actuelle
  • L’utilisateur dit : « Arrête l’écoute »
  • Le mode d’écoute active expire

Emplacement des étiquettes de conseil vocal

Les étiquettes de conseil vocal sont centrées horizontalement et verticalement au sein du rectangle englobant du contrôle. Lorsque les contrôles sont petits et serrés les uns contre les autres, les étiquettes peuvent se chevaucher ou être masquées par d’autres. VES essaiera alors de les éloigner les unes des autres pour les séparer et les rendre plus visibles. Toutefois, cela peut ne pas toujours fonctionner. Si l'interface utilisateur est très encombrée, certaines étiquettes seront probablement masquées par d’autres. Veuillez passer en revue votre interface utilisateur avec « Affiche les étiquettes » pour vous assurer qu’il y a suffisamment de place pour afficher les conseils vocaux.

Capture d’écran des étiquettes de conseil vocal horizontalement et verticalement centrées dans le rectangle englobant du contrôle.

Zones de liste déroulante

Lorsqu’une zone de liste déroulante est développée, chaque élément individuel de la zone de liste déroulante obtient sa propre étiquette de conseil vocal. Il s’agit souvent de contrôles existants derrière la liste déroulante. Afin d'éviter de présenter les étiquettes en désordre (à l'endroit où les étiquettes d’éléments de zone de liste modifiable sont mélangées avec les étiquettes des contrôles derrière la zone de liste déroulante), lorsqu’une zone de liste déroulante est développée, seules les étiquettes de ses éléments enfants seront affichées et toutes les autres étiquettes de conseil vocal seront masquées. L’utilisateur peut ensuite sélectionner l’un des éléments de liste ou « fermer » la zone de liste déroulante.

  • Étiquettes sur les zones de liste déroulante réduites :

    Capture d’écran de la fenêtre Affichage et son > Sortie vidéo avec des étiquettes sur les zones de liste déroulante réduites.

  • Étiquettes sur la zone de liste déroulante développée :

    Capture d’écran de la fenêtre Affichage et son > Sortie vidéo avec des étiquettes sur la zone de liste déroulante développée.

Contrôles défilants

Pour les contrôles défilants, les conseils vocaux des commandes de défilement sont centrés sur chacun des bords du contrôle. Les conseils vocaux ne sont affichés que pour les directions de défilement actionnables. Par exemple, si le défilement vertical n’est pas disponible, « défile vers le haut » et « défile vers le bas » ne s’afficheront pas. Lorsque plusieurs régions défilantes sont présentes, VES utilise des ordinaux pour les différencier (par exemple. « Défile vers la droite 1 », « Défile vers la droite 2 », etc.).

Capture d’écran des conseils vocaux Défile vers la gauche et Défile vers la droite sur une interface utilisateur à défilement horizontal.

Lever les ambiguïtés

Lorsque plusieurs éléments d’interface utilisateur ont le même nom ou que le module de reconnaissance vocale correspond à plusieurs candidats, VES entre en mode lever des ambiguïtés. Dans ce mode, les étiquettes de conseil vocal sont affichées pour les éléments impliqués afin que l’utilisateur puisse sélectionner celui qui convient. L’utilisateur peut annuler le mode de lever des ambiguïtés en disant « annule ».

Par exemple :

  • En mode d’écoute active, avant le lever des ambiguïtés, l’utilisateur dit : « Suis-je ambigu » :

    Capture d’écran du mode d’écoute active avec l’option « Maintenant, tu peux dire ce que tu vois » affichée et aucune étiquette sur les boutons.

  • Les deux boutons ont été mis en correspondance et les ambiguïtés commencent à être levées :

    Capture d’écran du mode d’écoute active avec l’option « Lequel des deux voulais-tu » affichée et les étiquettes Élément 1 et Élément 2 sur les boutons.

  • Affichage de l’action de clic lorsque « Sélectionne 2 » a été choisi :

    Capture d'écran du mode d'écoute actif avec l'option « Maintenant, tu peux dire ce que tu vois » affichée et l'étiquette « Suis-je ambigu » sur le premier bouton.

Exemple d’interface utilisateur

Voici un exemple d’interface utilisateur XAML, en définissant AutomationProperties.Name de différentes manières :

<Page
    x:Class="VESSampleCSharp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VESSampleCSharp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="button1" Content="Hello World" HorizontalAlignment="Left" Margin="44,56,0,0" VerticalAlignment="Top"/>
        <Button x:Name="button2" AutomationProperties.Name="Launch Game" Content="Launch" HorizontalAlignment="Left" Margin="44,106,0,0" VerticalAlignment="Top" Width="99"/>
        <TextBlock AutomationProperties.Name="Day of Week" x:Name="label1" HorizontalAlignment="Left" Height="22" Margin="168,62,0,0" TextWrapping="Wrap" Text="Select Day of Week:" VerticalAlignment="Top" Width="137"/>
        <ComboBox AutomationProperties.LabeledBy="{Binding ElementName=label1}" x:Name="comboBox" HorizontalAlignment="Left" Margin="310,57,0,0" VerticalAlignment="Top" Width="120">
            <ComboBoxItem Content="Monday" IsSelected="True"/>
            <ComboBoxItem Content="Tuesday"/>
            <ComboBoxItem Content="Wednesday"/>
            <ComboBoxItem Content="Thursday"/>
            <ComboBoxItem Content="Friday"/>
            <ComboBoxItem Content="Saturday"/>
            <ComboBoxItem Content="Sunday"/>
        </ComboBox>
        <Button x:Name="button3" HorizontalAlignment="Left" Margin="44,156,0,0" VerticalAlignment="Top" Width="213">
            <Grid>
                <TextBlock AutomationProperties.Name="Accept">Accept Offer</TextBlock>
                <TextBlock Margin="0,25,0,0" Foreground="#FF5A5A5A">Exclusive offer just for you</TextBlock>
            </Grid>
        </Button>
    </Grid>
</Page>

Lorsqu'on utilise l’exemple ci-dessus, ceci est l’apparence de l’interface utilisateur avec et sans étiquettes de conseil vocal.

  • En mode d’écoute active, sans étiquettes affichées :

    Capture d’écran du mode d’écoute active avec l'option « Pour afficher les étiquettes, dis

  • En mode d’écoute active, une fois que l’utilisateur dit « affiche les étiquettes » :

    Capture d’écran du mode d’écoute active avec l’option « Si tu as terminé, dis

Dans le cas de button1, XAML remplit automatiquement la propriété AutomationProperties.Name à l’aide du texte du contenu de texte visible du contrôle. C’est pourquoi il existe une étiquette de conseil vocal même s’il n’y a pas d’ensemble explicite AutomationProperties.Name.

Avec button2, nous définissons explicitement la valeur AutomationProperties.Name sur autre chose que le texte du contrôle.

Avec comboBox, nous avons utilisé la propriété LabeledBy pour référencer label1 comme source de l’automatisation Name, et dans label1, nous définissons l’expression AutomationProperties.Name plus naturelle que ce qui est affiché à l’écran (« Jour de la semaine » plutôt que « Sélectionne le jour de la semaine »).

Enfin, avec button3, VES récupère le Name du premier élément enfant car button3 lui-même n’a pas de AutomationProperties.Name défini.

Voir aussi