Aksesibilitas di Android: wawasan pengembang dan panduan implementasi

Diterbitkan: 2022-09-12

Di seluruh dunia, ada sekitar 285 juta orang dengan gangguan penglihatan. Jadi, saat merancang aplikasi baru atau mempertimbangkan perombakan desain, tentu merupakan ide yang baik untuk menyesuaikan aplikasi Anda dengan kebutuhan kelompok pengguna yang luas ini. Menyesuaikan aplikasi untuk orang dengan gangguan penglihatan akan meningkatkan pengalaman semua pengguna Anda. Apa alasan lain untuk mempertimbangkan peningkatan aksesibilitas aplikasi Anda , dan bagaimana melakukannya? Temukan semua jawabannya di bawah ini!

Bagaimana orang dengan gangguan penglihatan menggunakan aplikasi?

Pembaca layar adalah alat untuk menjalankan aplikasi (atau sekadar menjelajahi layar ponsel cerdas Anda) untuk orang buta dan tunanetra. Pembaca layar paling populer untuk Android adalah TalkBack . Dengan alat ini, pengguna melakukan input melalui gerakan seperti menggesek atau menyeret.

Biasanya, keluarannya berupa umpan balik lisan. Di TalkBack , kami memiliki dua mode masukan isyarat:

Eksplorasi sentuh , tempat Anda menyeret jari melintasi layar.
Navigasi linier , di mana Anda menggesek ke kiri dan kanan dengan jari Anda sampai Anda menemukan item yang menarik.

Setelah Anda tiba di item yang Anda minati, Anda dapat mengetuknya dua kali untuk mengaktifkannya. Ingin tahu lebih banyak tentang cara menjalankan TalkBack? Silahkan baca artikel berikut.

TalkBack adalah pembaca layar paling populer untuk Android

Prinsip aplikasi yang dapat diakses

Untuk memungkinkan penyandang tunanetra menggunakan aplikasi kita, pertama-tama kita perlu memahami prinsip-prinsip yang harus kita ikuti saat merancangnya. Oleh karena itu, sebelum kita beralih ke bagian implementasi, mari kita bahas asumsi yang paling penting.

Tata letak dan tipografi

Bagian visual dari aplikasi sangat penting. Tombol dan penanganan teks yang diterapkan dengan benar adalah salah satu faktor terpenting yang membuat aplikasi dapat diakses.

Target sentuh

Target sentuh adalah bagian layar yang merespons interaksi pengguna. Rekomendasi utama adalah membuat target sentuh dengan resolusi minimal 48dp x 48dp. Anda akan membaca lebih lanjut tentang ini di bab berikutnya.

Warna dan Kontras

World Wide Web membuat panduan aksesibilitas kontras warna untuk membantu dan membantu pengguna dengan kekurangan warna. Menurut dokumentasi, aspek penting mengenai aksesibilitas kontras warna adalah:

Rasio : teks dan elemen interaktif harus memiliki rasio kontras warna minimal 4,5:1.
Warna sebagai indikator : warna tidak boleh menjadi satu-satunya indikator untuk elemen interaktif. Akan lebih baik jika Anda juga menggarisbawahi tautan saat mengarahkan kursor atau menandai bidang wajib dengan tanda bintang.
Buta warna: buta warna merah/hijau adalah yang paling umum. Oleh karena itu, Anda harus menghindari hijau di atas merah atau merah di atas hijau. Untuk alasan yang sama, harap hindari penggunaan warna merah dan hijau untuk indikator “buruk” dan “baik”.

Tipografi

Pengguna dapat meningkatkan ukuran font untuk meningkatkan keterbacaan . Di perangkat Android, ini adalah opsi sistem yang sering digunakan, jadi pastikan ada cukup ruang untuk font besar dan asing.

Teks aksesibilitas

Teks aksesibilitas adalah teks yang terlihat (misalnya, label elemen UI, teks pada tombol, tautan, dan formulir) dan deskripsi yang tidak terlihat (deskripsi konten, yang dapat memberikan lebih banyak informasi tentang komponen yang dijelaskan).

Apa kasus penggunaan paling umum dari teks aksesibilitas ?

Jenis dan status kontrol

Pembaca layar, seperti TalkBack, dapat secara otomatis mengumumkan tipe atau status kontrol dengan mengucapkan nama kontrol atau mengeluarkan suara.

Menunjukkan elemen dengan tindakan

Kata kerja tindakan menunjukkan apa yang dilakukan item atau tautan saat Anda mengetuknya dan menjelaskan apa yang dilakukan tampilan.

Elemen dengan perubahan status

Dalam kasus ikon yang beralih di antara nilai atau status, pembaca layar menjelaskan ikon sesuai dengan cara ditampilkan kepada pengguna. Untuk lebih banyak contoh, silakan baca pedoman Desain Material.

Ringkasan

Bab ini mengajarkan Anda bagaimana desain harus disesuaikan untuk tunanetra dan tunanetra. Sejauh ini, kita telah membahas tata letak, tipografi, dan aksesibilitas teks . Sekarang kita akan beralih ke prinsip-prinsip implementasinya.

Implementasi aksesibilitas

Di bagian berikut, saya akan fokus pada aspek kunci penerapan aksesibilitas ke aplikasi Anda. Mari kita mulai!

Tata Letak – Target sentuh

Seperti yang saya sebutkan di bagian teoretis, setiap elemen yang dapat diklik harus memiliki setidaknya 48dp/48dp.

Ada beberapa opsi untuk melakukan ini. Anda bisa:

Tentukan nilai untuk atribut lebar dan tinggi seperti yang direkomendasikan (48dp/48dp)
Tambahkan bantalan di sekitar ikon
Tentukan nilai untuk atribut: MinWidth dan/atau minHeight
Daftarkan TouchDelegate.

Lihat contoh dari dokumentasi resmi Google. Ini menunjukkan elemen yang memiliki ukuran target sentuh yang disarankan :

 <Tombol Gambar 
   ...
   android:minWidth="40dp"
   android:minHeight="32dp"
   android:paddingLeft="4dp"

   android:paddingTop="8dp"
   android:paddingRight="4dp"
   android:paddingBottom="8dp" />

Teks aksesibilitas

Salah satu cara untuk melampirkan teks aksesibilitas ke elemen UI Anda adalah dengan menggunakan atribut Android yang disebut ContentDescription . Jika Anda tidak menyediakannya untuk tombol gambar, misalnya, pengalaman pengguna TalkBack bisa sangat mengejutkan.

Lihat contohnya:

 <!-- Nilai untuk string berikut adalah "Search". ->
<Tampilan Gambar
   ...
   android:contentDescription="@string/search" />

Untuk elemen dekoratif seperti spacer dan pembagi, setel atribut “android:contentDescription” ke "null" . Jika aplikasi Anda hanya mendukung perangkat yang menjalankan Android 4.1 (API level 16) atau lebih tinggi, Anda dapat menyetel atribut “android:importantForAccessibility” ke "no" .

Harap pastikan untuk tidak menyertakan jenis kontrol atau status kontrol dalam deskripsi konten Anda. Android secara asli memiliki kata-kata seperti tombol, dipilih, dicentang, dll.

Teknik pelabelan

Di bawah ini Anda dapat menemukan serangkaian praktik yang baik untuk menjelaskan komponen UI dalam aplikasi Anda.

Komponen yang saling mendeskripsikan

Jika Anda memiliki komponen yang memungkinkan Anda memberikan beberapa data (misalnya EditText), ada baiknya memiliki objek View yang menjelaskannya (misalnya TextView). Inilah mengapa atribut "android:labelFor" dibuat. Silakan lihat contohnya:

 <!-- Teks label akan menjadi "Nama:" -->
<Tampilan Teks 
   ...
   android:
   android:labelFor="@+id/nameEntry"
   android:text="@string/nama" />

<!-- Teks aksesibilitas akan menjadi "Edit teks untuk nama" -->
<EditTeks 
   ...
   android: />

<!-- Teks label akan menjadi "Nama Keluarga:" -->
<Tampilan Teks 
   ...
   android:
   android:labelFor="@+id/surnameEntry"
   android:text="@string/nama keluarga" />

<!-- Teks aksesibilitas akan menjadi "Edit teks untuk nama keluarga" -->
<EditTeks 
   ...
   android: />

Koleksi elemen terkait

Jika aplikasi Anda memiliki elemen UI yang terkait secara alami (seperti bidang dengan informasi tentang buku), Anda dapat mengaturnya ke dalam grup menggunakan wadah yang dapat difokuskan . Untuk melakukannya, setel atribut objek container “android:focusable” ke true.

Dengan demikian, TalkBack dapat menyajikan deskripsi konten elemen dalam, satu demi satu, dalam satu pengumuman. Pengelompokan konten mengurangi jumlah gesekan yang harus dilakukan pengguna saat merampingkan keluaran ucapan. Silakan lihat contohnya:

 <Tata Letak Linier 
   ...
   android:
   android:orientasi="vertikal"
   android:focusable="benar">

   <Tampilan Teks
	  ...
       android:
       android:text="@string/title"/>

   <Tampilan Teks
	  ...
       android:
       android:text="@string/penulis"/>

   <Tampilan Teks
	  ...
       android:
       android:text="@string/pages"/>
</LinearLayout>

Tentu saja, jika penampung Anda memiliki tampilan bersarang, Anda juga dapat menerapkan solusi ini padanya. Ini akan membuat navigasi aplikasi Anda lebih mudah diakses.

Tindakan aksesibilitas

Saat aplikasi Anda mendukung tindakan seperti klik, tekan lama, atau geser , Anda perlu menyesuaikan tindakan ini untuk orang dengan gangguan penglihatan. Itulah yang akan kita fokuskan di bagian artikel ini.

Lihat bagaimana Anda dapat menerapkannya:

 ViewCompat.addAccessibilityAction(
   // Lihat untuk menambahkan tindakan aksesibilitas
   tampilan item,
   // Label yang dibaca oleh layanan aksesibilitas
   getString(R.string.save)
) { _, _ ->
   // Perintah aksesibilitas
   simpanItem()
   BENAR
}

Hal ini menyebabkan TalkBack mengumumkan “Ketuk dua kali untuk mengarsipkan” .

Dengan tindakan aksesibilitas yang diterapkan, pengguna sekarang dapat mengakses tindakan melalui menu tindakan. Saya akan memberi tahu Anda nanti tentang menavigasi ke menu ini. Harap diingat: sangat penting untuk memungkinkan pengguna melakukan semua alur dalam aplikasi Anda secara efisien.

Widget

Bagian ini pendek tapi sangat penting. Saat Anda membuat komponen UI, gunakan atau perluas widget yang disediakan sistem yang sejauh mungkin berada di hierarki kelas Android. Widget yang disediakan sistem jauh di bawah hierarki sudah memiliki sebagian besar kemampuan aksesibilitas yang dibutuhkan aplikasi Anda. Yang utama meliputi:

Tindakan aksesibilitas
Karakteristik
informasi negara.

Berkat ini, Anda tidak perlu menulis dukungan aksesibilitas penuh untuk komponen dari awal, dan Anda akan mengurangi risiko kesalahan.

Navigasi

TalkBack terus berkembang. Kami menggunakan dua menu Konteks (global dan lokal) belum lama ini untuk menavigasi sistem ponsel cerdas kami. Kini, kedua menu tersebut menjadi satu.

Menu konteks digunakan untuk dua tujuan utama:

Seperti namanya, ini digunakan untuk navigasi. Anda dapat menavigasi kata, tajuk, tautan, baris, konten unik, atau poin lain tergantung pada preferensi atau kemampuan aplikasi.
Tujuan kedua memungkinkan pengguna untuk mengubah pengaturan dan kontrol TalkBack dengan cepat.

Di menu ini, Anda dapat menemukan serangkaian tindakan (disebutkan di bagian " Tindakan aksesibilitas " di atas). Bagaimana Anda bisa mengakses menu ini? Ini sangat sederhana. Anda hanya perlu melakukan gerakan menggesek ke atas dan ke kanan.

Pengujian aksesibilitas

Dalam proyek yang telah saya kembangkan sejauh ini, saya terutama mendapat manfaat dari tiga bantuan berikut: Pemindai aksesibilitas, Espresso, dan Lint. Tentu saja, Anda memiliki lebih banyak alat yang Anda inginkan. Saya sangat menyarankan Anda memeriksanya sendiri. Anda dapat menemukan semua dokumentasi yang diperlukan di sini.

Pemindai Aksesibilitas

Accessibility Scanner - alat untuk pengujian aksesibilitas yang cepat dan mudah

Alat ini memindai antarmuka pengguna dan memberikan rekomendasi untuk meningkatkan aksesibilitas aplikasi.

Accessibility Scanner memungkinkan siapa saja, bukan hanya pengembang, dengan cepat dan mudah mengidentifikasi beberapa peningkatan aksesibilitas umum, misalnya target sentuh kecil, kesalahan kontras untuk teks dan gambar, deskripsi konten yang hilang untuk widget yang tidak berlabel, dll. Jika Anda ingin mulai menggunakan Accessibility Scanner atau sekadar mencari petunjuk lebih rinci, silakan baca dokumentasi berikut.

Android Lint

Saya yakin sebagian besar dari Anda mengetahui alat ini dari pekerjaan sehari-hari Anda. Yang perlu diingat adalah bahwa Android Studio juga memberikan peringatan tentang berbagai masalah aksesibilitas dan tautan ke tempat-tempat dalam kode sumber yang berisi masalah ini.

espreso

Espresso adalah pustaka pengujian Android yang memungkinkan Anda menguji antarmuka pengguna dengan cepat dan mudah. Ini memungkinkan interaksi dengan komponen antarmuka pengguna yang diuji aplikasi dan memastikan bahwa perilaku tertentu terjadi atau kondisi terpenuhi. Tentu saja, sebagai bagian dari dukungan aksesibilitas, Anda dapat mengaktifkan dan mengonfigurasi pengujian aksesibilitas .

Ringkasan

Membuat aplikasi Anda dapat diakses tidak hanya membukanya untuk pengguna baru. Ini membantu meningkatkan kehidupan kita sehari-hari dan membuat dunia lebih inklusif. Saya harap artikel ini membantu Anda mempelajari aksesibilitas. Untuk bacaan lebih lanjut, jangan lupa untuk memeriksa dokumentasi resmi.