Mengekspos informasi aksesibilitas dasar

Prinsip dasar aksesibilitas dihubungkan ke nama, peran, dan nilai. Topik ini menunjukkan cara mengekspos properti ini di aplikasi Anda sehingga teknologi bantuan dapat menginterpretasikan UI Anda dengan benar.

Nama yang dapat diakses

Nama yang dapat diakses adalah label yang diumumkan pembaca layar untuk elemen UI. Atur pada elemen yang menyampaikan makna atau mendukung interaksi, termasuk gambar, bidang input, tombol, kontrol, dan wilayah.

Tabel berikut ini menjelaskan cara menentukan atau mendapatkan nama yang dapat diakses untuk berbagai jenis elemen dalam UI XAML.

Jenis elemen Deskripsi
Teks statis Untuk elemen TextBlock dan RichTextBlock , nama yang dapat diakses secara otomatis ditentukan dari teks yang terlihat (dalam). Semua teks dalam elemen tersebut digunakan sebagai nama. Lihat Nama dari teks dalam.
Gambar Elemen Gambar XAML tidak memiliki padanan langsung dengan atribut alt dari elemen img HTML dan elemen serupa. Gunakan AutomationProperties.Name untuk memberikan nama, atau menggunakan teknik keterangan. Lihat nama aksesibilitas untuk gambar.
Elemen formulir Nama yang dapat diakses untuk elemen formulir harus sama dengan label yang ditampilkan untuk elemen tersebut. Lihat Label dan LabeledBy.
Tombol dan tautan Secara default, nama tombol atau tautan yang dapat diakses didasarkan pada teks yang terlihat, menggunakan aturan yang sama seperti yang dijelaskan dalam Nama dari teks dalam. Jika tombol hanya berisi gambar, gunakan AutomationProperties.Name untuk menyediakan teks saja yang setara dengan tindakan yang dimaksudkan tombol.

Sebagian besar elemen kontainer (seperti panel) tidak mengekspos nama yang dapat diakses. Dalam Automasi UI, item anak yang bermakna harus memberikan nama dan peran, sementara kontainer terutama mengekspos struktur untuk penjelajahan.

Peran dan nilai

Kontrol XAML mengekspos peran (dan, jika berlaku, nilai) melalui dukungan Automation UI bawaan mereka. Periksa properti ini dengan alat Automation UI atau dalam dokumentasi AutomationPeer setiap kontrol. Peran dipetakan ke AutomationControlType dan muncul ke teknologi bantuan melalui AutomationPeer kontrol.

Hanya kontrol dengan semantik nilai yang menampilkan nilai dari UI Automation. Misalnya, TextBox mendukung IValueProvider melalui TextBoxAutomationPeer, sehingga teknologi bantuan dapat mendeteksi dan membaca nilainya saat ini.

Nota

Jika Anda mengatur AutomationProperties.Name secara eksplisit, jangan ulangi istilah peran/jenis seperti "tombol" atau "daftar" dalam nama. Peran/jenis berasal dari LocalizedControlType, dan banyak teknologi bantuan menambahkannya ke namanya. Mengulangi teks peran dapat menghasilkan output seperti "tombol tombol". Validasi perilaku ini dengan Narator.

Mempengaruhi tampilan pohon UI Otomatisasi

Automasi UI mewakili hubungan elemen dalam tiga tampilan pohon: mentah, kontrol, dan konten. Setiap tampilan menyajikan tujuan yang berbeda. Tampilan mentah mencakup hampir semua elemen otomatisasi, tampilan kontrol menekankan kontrol interaktif dan titik navigasi struktural, dan tampilan konten berfokus pada elemen yang mengomunikasikan konten yang menghadap pengguna. Dalam praktiknya, teknologi bantuan dan alat inspeksi aksesibilitas paling sering mengandalkan tampilan kontrol karena memberikan keseimbangan yang paling berguna antara kelengkapan dan kegunaan.

Secara default, sebagian besar elemen turunan Kontrol muncul dalam tampilan kontrol saat aplikasi Anda diekspos melalui Automasi UI. Dalam antarmuka pengguna yang terdiri dari beberapa elemen, ini dapat memperkenalkan node duplikat atau bernilai rendah yang menambah kebisingan bagi pengguna teknologi pendukung. Gunakan AutomationProperties.AccessibilityView untuk mengontrol bagaimana elemen tertentu diekspos di seluruh tampilan pohon. Misalnya, menempatkan elemen di Raw biasanya membuatnya tersedia untuk skenario diagnostik dan traversal sambil mengecualikannya dari tampilan utama yang digunakan oleh banyak teknologi bantuan. Untuk meninjau pola dunia nyata, periksa templat kontrol di generic.xaml dan cari AutomationProperties.AccessibilityView.

Nama dari teks bagian dalam

Banyak kontrol XAML dapat memperoleh nama default yang dapat diakses dari teks yang sudah terlihat di UI. Perilaku ini mengurangi kebutuhan untuk mengatur AutomationProperties.Name secara eksplisit untuk pola berbasis teks umum, dan membantu menjaga apa yang didengar pengguna selaras dengan apa yang mereka lihat.

Nota

Automasi UI memberlakukan maksimum 2048 karakter untuk nama yang dapat diakses. Jika pembuatan nama otomatis menghasilkan string yang lebih panjang, nilainya akan terpotong.

Nama yang dapat diakses untuk gambar

Untuk konten non-teks seperti gambar dan bagan, berikan alternatif teks sehingga pembaca layar dapat mengidentifikasi dan mengumumkan elemen dengan benar. Karena elemen-elemen ini biasanya tidak mengekspos teks dalam, Automasi UI tidak dapat memperoleh nama default yang dapat diakses secara otomatis. (Visual dekoratif atau struktural murni adalah pengecualian dan umumnya tidak boleh diberi nama.) Saat gambar yang bermakna perlu diumumkan, atur AutomationProperties.Name secara eksplisit, seperti yang ditunjukkan dalam contoh berikut.

<Image
    Source="Assets/product.png"
    AutomationProperties.Name="Customer using the product" />

Sebagai alternatif, ekspos keterangan yang terlihat dan kaitkan ke gambar melalui AutomationProperties.LabeledBy. Ini menjaga label lisan selaras dengan teks di layar dan menghindari string duplikat dalam markup. Contoh WinUI berikut menunjukkan pola ini:

<StackPanel Spacing="8">
    <Image
        x:Name="heroImage"
        Width="480"
        Source="Assets/snoqualmie-NF.jpg"
        AutomationProperties.LabeledBy="{Binding ElementName=heroCaption}" />
    <TextBlock x:Name="heroCaption" Text="Mount Snoqualmie Skiing" />
</StackPanel>

Label dan DilabeliOleh

Untuk bidang formulir, pola pelabelan pilihan adalah menentukan teks label yang terlihat dalam TextBlock dan mereferensikan elemen tersebut dari kontrol input melalui AutomationProperties.LabeledBy. Ini menciptakan hubungan antara label UI dan kontrol di pohon otomatisasi, sehingga teknologi bantuan dapat mengumumkan nama bidang yang cocok dengan apa yang ditampilkan di layar. Pola ini umumnya lebih dapat dipertahankan daripada menduplikasi teks label di beberapa properti karena string sumber yang sama mendorong pelabelan visual dan yang dapat diakses.

<StackPanel x:Name="LayoutRoot" Spacing="12">
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="firstNameLabel" Text="First name" />
        <TextBox
            x:Name="firstNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=firstNameLabel}" />
    </StackPanel>

    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="lastNameLabel" Text="Last name" />
        <TextBox
            x:Name="lastNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=lastNameLabel}" />
    </StackPanel>
</StackPanel>

Deskripsi yang dapat diakses (opsional)

Deskripsi yang dapat diakses memberikan informasi tambahan tentang elemen UI ketika nama yang dapat diakses saja tidak cukup. Gunakan untuk menambahkan konteks klarifikasi, seperti niat, petunjuk penggunaan, atau detail perilaku penting yang membantu pengguna teknologi bantuan memahami cara bekerja dengan kontrol.

Di Narator, deskripsi biasanya dibaca sesuai permintaan daripada sebagai bagian dari pengumuman default. Pengguna dapat meminta detail tambahan ini dengan menekan CapsLock+F.

Perlakukan nama yang dapat diakses sebagai pengidentifikasi utama untuk kontrol, dan pertahankan ringkas. Ketika penjelasan lebih lanjut diperlukan, berikan detail tambahan tersebut melalui AutomationProperties.HelpText selain AutomationProperties.Name.

Menguji aksesibilitas lebih awal dan sering

Cara yang paling dapat diandalkan untuk memvalidasi dukungan pembaca layar adalah dengan menguji aplikasi Anda secara langsung dengan pembaca layar selama pengembangan, tidak hanya pada waktu rilis. Pengujian awal dan berulang membantu Anda mengidentifikasi nama yang dapat diakses yang hilang atau menyesatkan, eksposur kontrol yang salah, dan masalah navigasi ketika perubahan masih murah untuk diperbaiki. Setelah setiap proses, perbaiki struktur UI dan properti UI Automation Anda berdasarkan apa yang sebenarnya didengar pengguna dan bagaimana mereka bergerak melalui antarmuka. Untuk detail selengkapnya, lihat Pengujian aksesibilitas.

AccScope adalah alat yang berguna untuk alur kerja ini karena memvisualisasikan UI Anda sebagai pohon otomatisasi, sehingga lebih mudah untuk memeriksa teknologi bantuan apa yang dapat ditemukan. Tampilannya yang berfokus pada Narator membantu Anda memverifikasi bagaimana teks bersumber dan bagaimana elemen dikelompokkan dan diurutkan untuk output lisan. Gunakan sepanjang siklus hidup produk, termasuk desain awal dan validasi templat kontrol, untuk menangkap masalah aksesibilitas struktural sebelum muncul dalam pengujian pengguna. Untuk detail tambahan, lihat AccScope.

Nama yang dapat diakses dari data dinamis

Banyak kontrol Windows merender konten melalui pengikatan data, yang berarti nama yang dapat diakses sering ditentukan dari data runtime daripada XAML statis. Saat templat daftar atau item diisi secara dinamis, verifikasi bahwa setiap item yang dihasilkan mengekspos nama yang dapat diakses yang bermakna setelah pengikatan selesai. Bergantung pada kontrol dan komposisi templat, Anda mungkin perlu mengatur atau memperbarui properti aksesibilitas secara terprogram sehingga pohon otomatisasi mencerminkan status akhir yang dirender. Untuk contoh end-to-end, lihat "Skenario 4" dalam sampel aksesibilitas XAML (sampel warisan yang diarsipkan).

Nama dan pelokalan yang dapat diakses

Nama yang dapat diakses harus dilokalkan dengan rigor yang sama dengan teks UI yang terlihat. Simpan string label dalam sumber daya pelokalan dan sambungkan melalui pemetaan direktif x:Uid sehingga output lisan cocok dengan bahasa pengguna. Jika Anda mengatur AutomationProperties.Name secara eksplisit, pastikan nilai tersebut juga berasal dari sumber daya yang dilokalkan daripada teks yang dikodekan secara permanen.

Properti terlampir di AutomationProperties menggunakan sintaks kunci sumber daya yang memenuhi syarat sehingga pelokalan dapat menargetkan properti terlampir pada elemen tertentu. Misalnya, jika elemen diberi nama MediumButton, kunci sumber daya untuk AutomationProperties.Name adalah MediumButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name.

  • Last updated on