Menggunakan Ucapan untuk Memanggil Elemen UI

Artikel
07/13/2023

Voice Enabled Shell (VES) adalah ekstensi untuk Windows Speech Platform yang memungkinkan pengalaman ucapan kelas satu di dalam aplikasi, memungkinkan pengguna menggunakan ucapan untuk memanggil kontrol di layar dan menyisipkan teks melalui dikte. VES berusaha untuk memberikan pengalaman lihat-ucapkan ujung ke ujung yang umum di semua Windows Shell dan perangkat, dengan upaya minimum yang diperlukan dari pengembang aplikasi. Untuk mencapai hal ini, ini memanfaatkan Platform Ucapan Microsoft dan kerangka kerja UI Automation (UIA).

Panduan pengalaman pengguna

Berikut ini adalah gambaran umum tentang apa yang akan dialami pengguna saat menggunakan VES di Xbox, dan ini akan membantu mengatur konteks sebelum menyelami detail cara kerja VES.

Pengguna mengaktifkan konsol Xbox dan ingin menelusuri aplikasi mereka untuk menemukan sesuatu yang menarik:

Pengguna: "Hey Cortana, buka Game dan Aplikasi Saya"
Pengguna dibiarkan dalam Mode Mendengarkan Aktif (ALM), yang berarti konsol sekarang mendengarkan pengguna untuk memanggil kontrol yang terlihat di layar, tanpa perlu mengatakan, "Hey Cortana" setiap kali. Pengguna sekarang dapat beralih untuk melihat aplikasi dan menggulir daftar aplikasi:

Pengguna: "aplikasi"
Untuk menggulir tampilan, pengguna cukup mengatakan:

Pengguna: "gulir ke bawah"
Pengguna melihat seni kotak untuk aplikasi yang mereka minati tetapi lupa namanya. Pengguna meminta label tips suara ditampilkan:

Pengguna: "tampilkan label"
Sekarang setelah jelas apa yang harus dikatakan, aplikasi dapat diluncurkan:

Pengguna: "film dan TV"
Untuk keluar dari mode mendengarkan aktif, pengguna memberi tahu Xbox untuk berhenti mendengarkan:

Pengguna: "berhenti mendengarkan"
Nantinya, sesi mendengarkan aktif baru dapat dimulai dengan:

Pengguna: "Hey Cortana, buat pilihan" atau "Hey Cortana, pilih"

Dependensi otomatisasi UI

VES adalah klien Automation UI dan bergantung pada informasi yang diekspos oleh aplikasi melalui penyedia Automation UI-nya. Ini adalah infrastruktur yang sama yang sudah digunakan oleh fitur Narator pada platform Windows. Automasi UI memungkinkan akses terprogram ke elemen antarmuka pengguna, termasuk nama kontrol, jenisnya, dan pola kontrol apa yang diterapkannya. Saat UI berubah dalam aplikasi, VES akan bereaksi terhadap peristiwa pembaruan UIA dan mengurai ulang pohon Automation UI yang diperbarui untuk menemukan semua item yang dapat ditindaklanjuti, menggunakan informasi ini untuk membangun tata bahasa pengenalan ucapan.

Semua aplikasi UWP memiliki akses ke kerangka kerja Automation UI dan dapat mengekspos informasi tentang UI yang independen dari kerangka kerja grafis mana yang mereka bangun (XAML, DirectX/Direct3D, dll.). Dalam beberapa kasus, seperti XAML, sebagian besar pengangkatan berat dilakukan oleh kerangka kerja, sangat mengurangi pekerjaan yang diperlukan untuk mendukung Narator dan VES.

Untuk informasi selengkapnya tentang Automasi UI, lihat Dasar-Dasar Automasi UI.

Nama pemanggilan kontrol

VES menggunakan heuristik berikut untuk menentukan frasa apa yang akan didaftarkan dengan pengenal ucapan sebagai nama kontrol (yaitu apa yang perlu diucapkan pengguna untuk memanggil kontrol). Ini juga merupakan frasa yang akan muncul di label ujung suara.

Sumber Nama dalam urutan prioritas:

Jika elemen memiliki LabeledBy properti terlampir, VES akan menggunakan AutomationProperties.Name label teks ini.
AutomationProperties.Name elemen . Di XAML, konten teks kontrol akan digunakan sebagai nilai default untuk AutomationProperties.Name.
Jika kontrolnya adalah ListItem atau Button, VES akan mencari elemen turunan pertama dengan AutomationProperties.Name.

Kontrol yang dapat ditindakkan

VES mempertimbangkan kontrol yang dapat ditindaklanjuti jika menerapkan salah satu pola kontrol Automation berikut:

InvokePattern (misalnya. Tombol)- Mewakili kontrol yang memulai atau melakukan tindakan tunggal yang tidak ambigu dan tidak mempertahankan status saat diaktifkan.
TogglePattern (misalnya. Kotak Centang) - Mewakili kontrol yang dapat menelusuri serangkaian status dan mempertahankan status sekali diatur.
SelectionItemPattern (misalnya. Kotak Kombo) - Mewakili kontrol yang bertindak sebagai kontainer untuk kumpulan item anak yang dapat dipilih.
ExpandCollapsePattern (misalnya. Kotak Kombo) - Mewakili kontrol yang diperluas secara visual untuk menampilkan konten dan menciutkan untuk menyembunyikan konten.
ScrollPattern (misalnya. Daftar) - Mewakili kontrol yang bertindak sebagai kontainer yang dapat digulir untuk kumpulan elemen anak.

Kontainer yang dapat digulir

Untuk kontainer yang dapat digulir yang mendukung ScrollPattern, VES akan mendengarkan perintah suara seperti "gulir ke kiri", "gulir ke kanan", dll. dan akan memanggil Scroll dengan parameter yang sesuai saat pengguna memicu salah satu perintah ini. Perintah gulir disuntikkan berdasarkan nilai HorizontalScrollPercent properti dan VerticalScrollPercent . Misalnya, jika HorizontalScrollPercent lebih besar dari 0, "gulir ke kiri" akan ditambahkan, jika kurang dari 100, "gulir ke kanan" akan ditambahkan, dan sebagainya.

Tumpang tindih narator

Aplikasi Narator juga merupakan klien Automation UI dan menggunakan AutomationProperties.Name properti sebagai salah satu sumber untuk teks yang dibacanya untuk elemen UI yang saat ini dipilih. Untuk memberikan pengalaman aksesibilitas yang lebih baik, banyak pengembang aplikasi telah menggunakan kelebihan beban Name properti dengan teks deskriptif panjang dengan tujuan memberikan lebih banyak informasi dan konteks saat dibaca oleh Narator. Namun, ini menyebabkan konflik antara kedua fitur: VES membutuhkan frasa pendek yang cocok atau sangat cocok dengan teks kontrol yang terlihat, sementara Narator mendapat manfaat dari frasa yang lebih panjang dan lebih deskriptif untuk memberikan konteks yang lebih baik.

Untuk mengatasi hal ini, dimulai dengan Pembaruan Pembuat Windows 10, Narator diperbarui untuk juga melihat AutomationProperties.HelpText properti . Jika properti ini tidak kosong, Narator akan berbicara isinya selain AutomationProperties.Name. Jika HelpText kosong, Narator hanya akan membaca konten Nama. Ini akan memungkinkan string deskriptif yang lebih panjang untuk digunakan jika diperlukan, tetapi mempertahankan frasa ramah pengenalan ucapan yang lebih pendek di Name properti.

Diagram yang menunjukkan kode di balik tombol yang menyertakan AutomationProperties.Name dan AutomationProperties.HelpText yang menunjukkan bahwa Shell Yang Diaktifkan Suara mendengarkan Konfigurasi Nama.

Untuk informasi selengkapnya lihat Properti Automation untuk Dukungan Aksesibilitas di UI.

Mode Mendengarkan Aktif (ALM)

Memasukkan ALM

Di Xbox, VES tidak terus-menerus mendengarkan input ucapan. Pengguna perlu memasukkan Mode Mendengarkan Aktif secara eksplisit dengan mengatakan:

"Hey Cortana, pilih", atau
"Hei Cortana, buat pilihan"

Ada beberapa perintah Cortana lainnya yang juga membuat pengguna tetap aktif mendengarkan setelah selesai, misalnya "Hey Cortana, sign in" atau "Hey Cortana, go home".

Memasukkan ALM akan memiliki efek berikut:

Overlay Cortana akan ditampilkan di sudut kanan atas, memberi tahu pengguna bahwa mereka dapat mengatakan apa yang mereka lihat. Saat pengguna berbicara, fragmen frasa yang dikenali oleh pengenal ucapan juga akan ditampilkan di lokasi ini.
VES mengurai pohon UIA, menemukan semua kontrol yang dapat ditindakkan, mendaftarkan teks mereka dalam tata bahasa pengenalan ucapan dan memulai sesi mendengarkan berkelanjutan.

Keluar dari ALM

Sistem akan tetap berada di ALM saat pengguna berinteraksi dengan UI menggunakan suara. Ada dua cara untuk keluar dari ALM:

Pengguna secara eksplisit mengatakan, "berhenti mendengarkan", atau
Batas waktu akan terjadi Jika tidak ada pengenalan positif dalam waktu 17 detik setelah memasukkan ALM atau sejak pengenalan positif terakhir

Memanggil kontrol

Ketika di ALM, pengguna dapat berinteraksi dengan UI menggunakan suara. Jika UI dikonfigurasi dengan benar (dengan properti Nama yang cocok dengan teks yang terlihat), menggunakan suara untuk melakukan tindakan harus menjadi pengalaman alami yang mulus. Pengguna harus dapat hanya mengatakan apa yang mereka lihat di layar.

Overlay UI pada Xbox

Nama yang diperoleh VES untuk kontrol mungkin berbeda dari teks aktual yang terlihat di UI. Ini dapat disebabkan oleh Name properti kontrol atau elemen terlampir LabeledBy yang secara eksplisit diatur ke string yang berbeda. Atau, kontrol tidak memiliki teks GUI tetapi hanya ikon atau elemen gambar.

Dalam kasus ini, pengguna memerlukan cara untuk melihat apa yang perlu dikatakan untuk memanggil kontrol seperti itu. Oleh karena itu, setelah aktif mendengarkan, tips suara dapat ditampilkan dengan mengatakan "tampilkan label". Hal ini menyebabkan label ujung suara muncul di atas setiap kontrol yang dapat ditindakkan.

Ada batas 100 label, jadi jika UI aplikasi memiliki kontrol yang lebih dapat ditindak lanjuti daripada 100 akan ada beberapa yang tidak akan memiliki label ujung suara yang ditampilkan. Label mana yang dipilih dalam hal ini tidak deterministik, karena tergantung pada struktur dan komposisi UI saat ini seperti yang pertama kali dijumlahkan di pohon UIA.

Setelah label ujung suara ditampilkan tidak ada perintah untuk menyembunyikannya, label tersebut akan tetap terlihat sampai salah satu peristiwa berikut terjadi:

pengguna memanggil kontrol
pengguna menavigasi jauh dari adegan saat ini
pengguna mengatakan, "berhenti mendengarkan"
waktu mode mendengarkan aktif habis

Lokasi label ujung suara

Label ujung suara dipusatkan secara horizontal dan vertikal dalam BoundingRectangle kontrol. Ketika kontrol kecil dan dikelompokkan dengan erat, label dapat tumpang tindih/menjadi dikaburkan oleh orang lain dan VES akan mencoba mendorong label ini terpisah untuk memisahkannya dan memastikan label terlihat. Namun, ini tidak dijamin berfungsi 100% dari waktu. Jika ada UI yang sangat ramai, kemungkinan akan mengakibatkan beberapa label dikaburkan oleh orang lain. Harap tinjau UI Anda dengan "label acara" untuk memastikan ada ruang yang memadai untuk visibilitas ujung suara.

Cuplikan layar label ujung suara secara horizontal dan berpusat secara vertikal dalam persegi panjang pembatas kontrol.

Kotak kombo

Ketika kotak kombo diperluas setiap item individual dalam kotak kombo mendapatkan label ujung suaranya sendiri dan sering kali ini akan berada di atas kontrol yang ada di belakang daftar drop-down. Untuk menghindari penyajian label yang berantakan dan membingungkan (di mana label item kotak kombo digabungkan dengan label kontrol di belakang kotak kombo) ketika kotak kombo diperluas hanya label untuk item turunannya yang akan ditampilkan; semua label ujung suara lainnya akan disembunyikan. Pengguna kemudian dapat memilih salah satu item drop-down atau "tutup" kotak kombo.

Label pada kotak kombo yang diciutkan:
Label pada kotak kombo yang diperluas:

Kontrol yang dapat digulir

Untuk kontrol yang dapat digulir, tips suara untuk perintah gulir akan berpusat pada setiap tepi kontrol. Tips suara hanya akan ditampilkan untuk petunjuk arah gulir yang dapat ditindak lanjuti, jadi misalnya jika pengguliran vertikal tidak tersedia, "gulir ke atas" dan "gulir ke bawah" tidak akan ditampilkan. Ketika beberapa wilayah yang dapat digulir hadir VES akan menggunakan ordinal untuk membedakannya (misalnya. "Gulir ke kanan 1", "Gulir ke kanan 2", dll.).

Cuplikan layar Gulir ke kiri dan Gulir tips suara kanan pada U I yang menggulir secara horizontal.

Disambiguasi

Ketika beberapa elemen UI memiliki Nama yang sama, atau pengenal ucapan yang cocok dengan beberapa kandidat, VES akan memasuki mode disambiguasi. Dalam mode ini label tips suara akan ditampilkan untuk elemen yang terlibat sehingga pengguna dapat memilih yang tepat. Pengguna dapat membatalkan keluar dari mode disambiguasi dengan mengatakan "batalkan".

Contohnya:

Dalam Mode Mendengarkan Aktif, sebelum disambiguasi; pengguna mengatakan, "Apakah saya Ambigu":
Kedua tombol cocok; disambiguasi dimulai:
Menampilkan tindakan klik saat "Pilih 2" dipilih:

UI sampel

Berikut adalah contoh UI berbasis XAML, mengatur AutomationProperties.Name dengan berbagai cara:

<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>

Menggunakan sampel di atas di sini adalah seperti apa antarmuka pengguna akan terlihat dengan dan tanpa label ujung suara.

Dalam Mode Mendengarkan Aktif, tanpa label yang ditampilkan:
Dalam Mode Mendengarkan Aktif, setelah pengguna mengatakan "tampilkan label":

Dalam kasus button1, XAML secara otomatis mengisi AutomationProperties.Name properti menggunakan teks dari konten teks kontrol yang terlihat. Inilah sebabnya mengapa ada label ujung suara meskipun tidak ada set eksplisit AutomationProperties.Name .

Dengan button2, kami secara eksplisit mengatur AutomationProperties.Name ke sesuatu selain teks kontrol.

Dengan comboBox, kami menggunakan LabeledBy properti untuk mereferensikan label1 sebagai sumber otomatisasi Name, dan dalam label1 kami mengatur AutomationProperties.Name ke frasa yang lebih alami daripada apa yang dirender di layar ("Hari Dalam Minggu" daripada "Pilih Hari Dalam Minggu").

Akhirnya, dengan button3, VES mengambil Name dari elemen anak pertama karena button3 itu sendiri tidak memiliki satu AutomationProperties.Name set.