Persyaratan teks yang dapat diakses

Topik ini mencakup persyaratan teks yang dapat diakses untuk aplikasi Windows, termasuk kontras, peran teks Automation UI, dan panduan untuk teks dalam grafik.

Rasio kontras

Jangan perlakukan mode kontras tinggi sebagai mitigasi utama untuk keterbacaan rendah. Pengaturan desain teks pada kontras latar depan/latar belakang yang memadai dalam pengalaman bawaan.

Evaluasi kontras bersifat deterministik dan tidak memperhitungkan persepsi rona. Misalnya, teks merah pada latar belakang hijau dapat tidak dapat dibaca untuk beberapa pengguna dengan kekurangan penglihatan warna, bahkan ketika warna tampak berbeda secara visual.

Rekomendasi di bagian ini selaras dengan G18: Memastikan bahwa rasio kontras setidaknya 4,5:1 ada antara teks (dan gambar teks) dan latar belakang di belakang teks dalam Teknik W3C untuk WCAG 2.0.

Untuk memenuhi persyaratan ini, teks yang terlihat harus memiliki rasio kontras luminans minimum 4,5:1 terhadap latar belakangnya. Pengecualian mencakup logo dan teks insidental, seperti teks di antarmuka pengguna yang tidak aktif.

Teks dekoratif yang tidak menyampaikan informasi apapun dikecualikan. Misalnya, kata-kata yang digunakan hanya sebagai latar belakang visual, dan dapat dipertukarkan tanpa mengubah makna, tidak perlu memenuhi kriteria ini.

Gunakan alat kontras warna untuk memverifikasi bahwa rasio kontras teks yang terlihat dapat diterima. Lihat Teknik untuk WCAG 2.0 G18 (Bagian sumber daya) untuk alat yang dapat menguji rasio kontras.

Nota

Beberapa alat yang tercantum oleh Teknik untuk WCAG 2.0 G18 tidak dapat digunakan secara interaktif dengan aplikasi Windows. Anda mungkin perlu memasukkan nilai warna latar depan dan latar belakang secara manual di alat ini, atau membuat tangkapan layar UI aplikasi lalu menjalankan alat rasio kontras pada gambar tangkapan layar.

Peran elemen teks

Aplikasi Windows biasanya menggunakan elemen dan peran teks berikut:

Ketika kontrol melaporkan peran Edit , teknologi bantuan mengasumsikan nilai dapat diedit oleh pengguna. Menempatkan teks statis di TextBox salah melapor peran dan model interaksi.

Untuk teks statis, gunakan TextBlock dan RichTextBlock. Ini bukan subkelas Kontrol , tidak dapat difokuskan keyboard, dan biasanya tidak muncul dalam urutan tab tetapi pembaca layar masih dapat membacanya melalui mode baca/navigasi yang independen dari fokus (misalnya, perilaku kursor virtual).

Hindari menempatkan teks statis dalam kontainer yang dapat difokuskan hanya untuk mengeksposnya melalui navigasi tab. Pengguna mengharapkan perhentian tab dapat ditindaklanjuti, dan konten statis dalam urutan tab biasanya merupakan regresi kegunaan. Validasi perilaku dengan Narator.

Sarankan aksesibilitas secara otomatis

Saran otomatis adalah pola di mana daftar saran diperbarui saat pengguna mengetik di bidang input. Jika Anda menggunakan XAML AutosuggestBox atau kontrol HTML intrinsik, sebagian besar dukungan aksesibilitas sudah tersedia.

Agar implementasi kustom dapat diakses, daftar input dan saran harus dikaitkan di pohon UIA. Lihat Menerapkan saran otomatis.

Narrator mendukung pola ini dengan fitur saran khusus. Saat input dan daftar tersambung dengan benar, pengguna dapat:

  • Ketahui keberadaan daftar dan kapan daftar akan ditutup
  • Ketahui berapa banyak saran yang tersedia
  • Mengetahui item yang dipilih, jika ada
  • Dapat memindahkan fokus Narrator ke daftar
  • Dapat menavigasi saran dengan menggunakan semua mode baca lainnya.

Daftar saran
Contoh daftar saran

Menerapkan saran otomatis

Kaitkan bidang input dan daftar saran di pohon UIA. Gunakan UIA_ControllerForPropertyId di aplikasi desktop atau ControlledPeers di aplikasi XAML.

Ada dua perilaku saran otomatis umum.

Pilihan default
Jika daftar memiliki pilihan default, Narator mengharapkan UIA_SelectionItem_ElementSelectedEventId di aplikasi desktop atau AutomationEvents.SelectionItemPatternOnElementSelected di aplikasi XAML.

Aktifkan peristiwa yang dipilih terkait setiap kali pilihan berubah, termasuk pembaruan yang disebabkan oleh navigasi pengetikan atau daftar.

Daftar dengan pilihan default
Contoh di mana ada pilihan default

Tidak ada pilihan default
Jika tidak ada pilihan default, Narrator mengharapkan UIA_LayoutInvalidatedEventId di aplikasi desktop atau LayoutInvalidated di aplikasi XAML setiap kali daftar diperbarui.

Daftar tanpa pilihan default
Contoh di mana tidak ada pilihan default

Implementasi XAML

Dengan AutosuggestBox default, perilaku aksesibilitas yang diperlukan sudah diatur.

Untuk implementasi kustom (seperti TextBox plus list), atur AutomationProperties.ControlledPeers pada TextBox. Fire AutomationPropertyChanged setiap kali ControlledPeers ditambahkan atau dihapus, dan naikkan SelectionItemPatternOnElementSelected atau LayoutInvalidated, berdasarkan skenario Anda.

Implementasi HTML

Dengan kontrol HTML intrinsik, pemetaan UIA sudah disediakan. Contoh:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Jika Anda membangun kontrol kustom, terapkan semantik ARIA yang diperlukan seperti yang didefinisikan oleh standar W3C.

Teks dalam grafik

Hindari menyematkan teks dalam grafik jika memungkinkan. Teks yang dirender di dalam sumber Gambar tidak dapat dibaca secara otomatis oleh teknologi bantuan.

Jika teks dalam grafik diperlukan, atur AutomationProperties.Name ke konten yang setara (atau ringkasan semantik ringkas). Terapkan prinsip yang sama pada konten serupa teks yang dirender melalui Jalur atau Glyphs.

Ukuran dan penskalaan huruf teks

Teks yang terlalu kecil dapat menyebabkan masalah keterbacaan. Mulailah dengan ukuran default yang wajar di seluruh aplikasi.

Anda kemudian harus memvalidasi terhadap pengaturan aksesibilitas terkait teks Windows, termasuk:

  • Kaca Pembesar, yang memperbesar bagian dari UI. Pastikan tata letak dan pembungkusan garis tetap dapat dibaca di bawah pembesaran.
  • Pengaturan skala dan resolusi global dalam Settings->System->Display->Scale and layout. Nilai yang tersedia bervariasi menurut perangkat keras tampilan.
  • Pengaturan ukuran teks di Settings->Kemudahan Akses->Display. Buat teks lebih besar menskalakan teks dalam kontrol yang didukung di seluruh aplikasi dan layar (kontrol teks WinUI mendukung ini secara default).

Nota

Pengaturan Buat semuanya lebih besar memungkinkan pengguna menentukan ukuran pilihan mereka untuk teks dan aplikasi secara umum di layar utama mereka saja.

Banyak elemen dan kontrol teks mengekspos IsTextScaleFactorEnabled, yang defaultnya adalah true. Saat diaktifkan, teks akan diskalakan secara otomatis, dengan nilai FontSize yang lebih kecil biasanya lebih terpengaruh daripada yang lebih besar.

Atur IsTextScaleFactorEnabled ke false hanya jika perlu.

Lihat Penskalaan teks untuk detail selengkapnya.

Gunakan sampel ini untuk membandingkan perilaku dengan dan tanpa IsTextScaleFactorEnabled saat Ukuran teks berubah.

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Hindari menonaktifkan penskalakan teks secara luas. Pensakalan teks yang konsisten lintas aplikasi adalah fitur aksesibilitas yang penting.

Kontrol teks WinUI mendukung pengalaman penskalaan teks lengkap tanpa kustomisasi atau templat apa pun. Untuk aplikasi berbasis WinRT lainnya, Anda dapat memantau TextScaleFactorChanged dan mendapatkan TextScaleFactor untuk bereaksi terhadap perubahan ukuran teks sistem:

private readonly Windows.UI.ViewManagement.UISettings _uiSettings = new();

public MainWindow()
{
    InitializeComponent();
    _uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
}

private void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    // Marshal to the UI thread before applying layout or visual updates.
    DispatcherQueue.TryEnqueue(() =>
    {
        var scale = sender.TextScaleFactor;
        // Apply updates for UI that depends on text scale.
    });
}

TextScaleFactor adalah double dalam rentang [1,2.25]. Anda dapat menggunakannya untuk mengoordinasikan elemen UI terkait (misalnya, menskalakan grafik dengan teks).

Jangan asumsikan penskalakan seragam di semua ukuran teks. Teks yang lebih besar umumnya terpengaruh kurang dari teks yang lebih kecil.

Jenis ini memiliki properti IsTextScaleFactorEnabled :

Examples

Buka aplikasi Galeri WinUI 3 dan lihat dukungan aksesibilitas teks dalam tindakan

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.
  • Last updated on