Share via

Persyaratan teks yang dapat diakses

  • Artikel

Topik ini menjelaskan praktik terbaik untuk aksesibilitas teks dalam aplikasi, dengan memastikan bahwa warna dan latar belakang memenuhi rasio kontras yang diperlukan. Topik ini juga membahas peran Microsoft UI Automation yang dapat dimiliki elemen teks dalam aplikasi Platform Windows Universal (UWP), dan praktik terbaik untuk teks dalam grafik.

Rasio kontras

Meskipun pengguna selalu memiliki opsi untuk beralih ke mode kontras tinggi, desain aplikasi Anda untuk teks harus menganggap opsi tersebut sebagai pilihan terakhir. Praktik yang jauh lebih baik adalah memastikan bahwa teks aplikasi Anda memenuhi pedoman tertentu yang ditetapkan untuk tingkat kontras antara teks dan latar belakangnya. Evaluasi tingkat kontras didasarkan pada teknik deterministik yang tidak mempertimbangkan warna warna. Misalnya, jika Anda memiliki teks merah di latar belakang hijau, teks tersebut mungkin tidak dapat dibaca oleh seseorang dengan gangguan kebutaan warna. Memeriksa dan memperbaiki rasio kontras dapat mencegah jenis masalah aksesibilitas ini.

Rekomendasi untuk kontras teks yang didokumentasikan di sini didasarkan pada standar aksesibilitas web, G18: Memastikan bahwa rasio kontras setidaknya 4,5:1 ada di antara teks (dan gambar teks) dan latar belakang di belakang teks. Panduan ini ada dalam spesifikasi Teknik W3C untuk WCAG 2.0 .

Agar dianggap dapat diakses, teks yang terlihat harus memiliki rasio kontras luminositas minimum 4,5:1 terhadap latar belakang. Pengecualian mencakup logo dan teks insidental, seperti teks yang merupakan bagian dari komponen UI yang tidak aktif.

Teks yang dekoratif dan tidak menyampaikan informasi yang dikecualikan. Misalnya, jika kata-kata acak digunakan untuk membuat latar belakang, dan kata-kata dapat diatur ulang atau diganti tanpa mengubah arti, kata-kata dianggap dekoratif dan 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.

Catatan

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

Peran elemen teks

Aplikasi UWP dapat menggunakan elemen default ini (umumnya disebut elemen teks atau kontrol textedit):

Ketika kontrol melaporkan yang memiliki peran Edit, teknologi bantuan mengasumsikan bahwa ada cara bagi pengguna untuk mengubah nilai. Jadi, jika Anda meletakkan teks statis di TextBox, Anda salah memportasi peran dan dengan demikian salah memportasi struktur aplikasi Anda ke pengguna aksesibilitas.

Dalam model teks untuk XAML, ada dua elemen yang terutama digunakan untuk teks statis, TextBlock dan RichTextBlock. Tidak satu pun dari ini adalah subkelas Kontrol , dan karenanya tidak satu pun yang dapat difokuskan pada keyboard atau dapat muncul dalam urutan tab. Tetapi itu tidak berarti bahwa teknologi bantuan tidak dapat atau tidak akan membacanya. Pembaca layar biasanya dirancang untuk mendukung beberapa mode membaca konten dalam aplikasi, termasuk mode baca khusus atau pola navigasi yang melampaui fokus dan urutan tab, seperti "kursor virtual". Jadi jangan letakkan teks statis Anda ke dalam kontainer yang dapat difokuskan hanya agar urutan tab membuat pengguna di sana. Pengguna teknologi bantu mengharapkan bahwa apa pun dalam urutan tab interaktif, dan jika mereka menemukan teks statis di sana, itu lebih membingungkan daripada membantu. Anda harus mengujinya sendiri dengan Narator untuk merasakan pengalaman pengguna dengan aplikasi Anda saat menggunakan pembaca layar untuk memeriksa teks statis aplikasi Anda.

Sarankan aksesibilitas secara otomatis

Saat pengguna mengetik ke dalam bidang entri dan daftar saran potensial muncul, jenis skenario ini disebut saran otomatis. Ini umum di bidang Kepada: baris email, kotak pencarian Cortana di Windows, bidang entri URL di Microsoft Edge, bidang entri lokasi di aplikasi Cuaca, dan sebagainya. Jika Anda menggunakan XAML AutosuggestBox atau kontrol intrinsik HTML, maka pengalaman ini sudah terhubung untuk Anda secara default. Untuk membuat pengalaman ini dapat diakses bidang entri dan daftar harus dikaitkan. Ini dijelaskan di bagian Menerapkan saran otomatis .

Narator telah diperbarui untuk membuat jenis pengalaman ini dapat diakses dengan mode saran khusus. Pada tingkat tinggi, ketika bidang edit dan daftar tersambung dengan benar, pengguna akhir akan:

  • Ketahui daftar ada dan kapan daftar ditutup
  • Ketahui berapa banyak saran yang tersedia
  • Mengetahui item yang dipilih, jika ada
  • Dapat memindahkan fokus Narator ke daftar
  • Dapat menavigasi melalui saran dengan semua mode baca lainnya

Daftar saran
Contoh daftar saran

Menerapkan saran otomatis

Untuk membuat pengalaman ini dapat diakses bidang entri dan daftar harus dikaitkan di pohon UIA. Asosiasi ini dilakukan dengan properti UIA_ControllerForPropertyId di aplikasi desktop atau properti ControlledPeers di aplikasi UWP.

Pada tingkat tinggi ada 2 jenis pengalaman saran otomatis.

Pilihan default
Jika pilihan default dibuat dalam daftar, Narator mencari peristiwa UIA_SelectionItem_ElementSelectedEventId di aplikasi desktop, atau peristiwa AutomationEvents.SelectionItemPatternOnElementSelected akan diaktifkan di aplikasi UWP. Setiap kali pilihan berubah, ketika pengguna mengetik huruf lain dan saran telah diperbarui atau ketika pengguna menavigasi melalui daftar, peristiwa ElementSelected harus diaktifkan.

Daftar dengan pilihan default
Contoh di mana ada pilihan default

Tidak ada pilihan default
Jika tidak ada pilihan default, seperti di kotak lokasi aplikasi Cuaca, maka Narator mencari peristiwa UIA_LayoutInvalidatedEventId desktop atau peristiwa UWP LayoutInvalidated untuk diaktifkan dalam daftar setiap kali daftar diperbarui.

Daftar tanpa pilihan default
Contoh di mana tidak ada pilihan default

Implementasi XAML

Jika Anda menggunakan XAML AutosuggestBox default, maka semuanya sudah terhubung untuk Anda. Jika Anda membuat pengalaman saran otomatis Anda sendiri menggunakan TextBox dan daftar maka Anda harus mengatur daftar sebagai AutomationProperties.ControlledPeers di TextBox. Anda harus mengaktifkan peristiwa AutomationPropertyChanged untuk properti ControlledPeers setiap kali Anda menambahkan atau menghapus properti ini dan juga mengaktifkan peristiwa SelectionItemPatternOnElementSelected Anda sendiri atau peristiwa LayoutInvalidated tergantung pada jenis skenario Anda, yang dijelaskan sebelumnya dalam artikel ini.

Implementasi HTML

Jika Anda menggunakan kontrol intrinsik dalam HTML, maka implementasi UIA telah dipetakan untuk Anda. Di bawah ini adalah contoh implementasi yang sudah terhubung untuk Anda:

<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 membuat kontrol Sendiri, Anda harus menyiapkan kontrol ARIA Anda sendiri, yang dijelaskan dalam standar W3C.

Teks dalam grafik

Jika memungkinkan, hindari menyertakan teks dalam grafik. Misalnya, teks apa pun yang Anda sertakan dalam file sumber gambar yang ditampilkan di aplikasi sebagai elemen Gambar tidak dapat diakses atau dibaca secara otomatis oleh teknologi bantuan. Jika Anda harus menggunakan teks dalam grafik, pastikan bahwa nilai AutomationProperties.Name yang Anda berikan setara dengan "teks alt" menyertakan teks atau ringkasan arti teks tersebut. Pertimbangan serupa berlaku jika Anda membuat karakter teks dari vektor sebagai bagian dari Jalur, atau dengan menggunakan Glyphs.

Ukuran dan skala font teks

Pengguna dapat mengalami kesulitan membaca teks di aplikasi ketika font yang digunakan terlalu kecil, jadi pastikan teks apa pun dalam aplikasi Anda berukuran wajar.

Setelah Anda melakukan hal yang jelas, Windows menyertakan berbagai alat aksesibilitas dan pengaturan yang dapat dimanfaatkan pengguna dan menyesuaikan dengan kebutuhan dan preferensi mereka sendiri untuk membaca teks. Ini termasuk:

  • Alat Kaca Pembesar, yang memperbesar area UI yang dipilih. Anda harus memastikan tata letak teks di aplikasi Anda tidak menyulitkan penggunaan Kaca Pembesar untuk membaca.
  • Pengaturan skala dan resolusi global dalam Pengaturan-Sistem-Tampilan-Skala>>> dan tata letak. Persis opsi ukuran mana yang tersedia dapat bervariasi karena ini tergantung pada kemampuan perangkat tampilan.
  • Pengaturan ukuran teks di Pengaturan-Kemudahan> akses-Tampilan>. Sesuaikan pengaturan Buat teks lebih besar untuk menentukan hanya ukuran teks dalam kontrol pendukung di semua aplikasi dan layar (semua kontrol teks UWP mendukung pengalaman penskalaan teks tanpa penyesuaian atau templat).

Catatan

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

Berbagai elemen dan kontrol teks memiliki properti IsTextScaleFactorEnabled . Properti ini memiliki nilai true secara default. Jika true, ukuran teks dalam elemen tersebut dapat diskalakan. Penskalakan mempengaruhi teks yang memiliki FontSize kecil ke tingkat yang lebih besar daripada yang mempengaruhi teks yang memiliki FontSize besar. Anda dapat menonaktifkan pengubahan ukuran otomatis dengan mengatur properti IsTextScaleFactorEnabled elemen ke false.

Lihat Penskalaan teks untuk detail selengkapnya.

Tambahkan markup berikut ke aplikasi dan jalankan. Sesuaikan pengaturan Ukuran teks , dan lihat apa yang terjadi pada setiap TextBlock.

XAML

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

Kami tidak menyarankan Anda menonaktifkan penskalaan teks karena menskalakan teks UI secara universal di semua aplikasi adalah pengalaman aksesibilitas penting bagi pengguna.

Anda juga dapat menggunakan peristiwa TextScaleFactorChanged dan properti TextScaleFactor untuk mengetahui tentang perubahan pada pengaturan Ukuran teks di ponsel. Berikut caranya:

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

Nilai TextScaleFactor adalah ganda dalam rentang [1,2.25]. Teks terkecil ditingkatkan skalanya dengan jumlah ini. Anda mungkin dapat menggunakan nilai untuk, misalnya, menskalakan grafik agar sesuai dengan teks. Tetapi ingat bahwa tidak semua teks diskalakan oleh faktor yang sama. Secara umum, teks yang lebih besar adalah untuk memulai, semakin sedikit yang dipengaruhi oleh penskalakan.

Jenis-jenis ini memiliki properti IsTextScaleFactorEnabled :

Contoh

Tip

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

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub