Memulai Aksesibilitas Android

1. Pengantar

Aplikasi Android harus dapat digunakan semua orang, termasuk orang dengan kebutuhan aksesibilitas. Kondisi umum yang memengaruhi penggunaan perangkat Android oleh seseorang mencakup tunanetra atau gangguan penglihatan, tunarungu atau gangguan pendengaran, keterampilan motorik terbatas, gangguan kognitif, dan buta warna. Dan ini hanya sebagian daftar.

Dalam codelab ini, Anda akan mempelajari masalah aksesibilitas yang umum terjadi di aplikasi. Secara khusus, Anda akan fokus pada tiga masalah berikut:

Label tidak ada
Target sentuh tidak memadai
Kontras yang buruk antara latar depan dan latar belakang

Anda akan mempelajari bagaimana masalah ini memengaruhi pengguna, cara memeriksa apakah masalah ini ada di aplikasi Anda, dan cara memperbaikinya.

Codelab terstruktur dalam langkah sederhana dan terpisah. Setiap langkah berfokus pada aspek aksesibilitas tertentu.

Audiens dan Prasyarat

Codelab ini ditujukan untuk developer Android yang ingin memahami cara membuat aplikasi mereka dapat diakses oleh pengguna dengan kebutuhan aksesibilitas. Diasumsikan bahwa tidak ada pemahaman sebelumnya tentang API atau panduan aksesibilitas.

Codelab ini mengasumsikan hal berikut:

Pemahaman dasar dalam menulis aplikasi Android.
Akses ke perangkat Android yang menjalankan Lollipop (API level 21) atau lebih tinggi.
Kemampuan untuk menginstal aplikasi Accessibility Scanner dari Google Play Store.

2. Mempersiapkan

Yang akan Anda build

Di codelab ini, Anda akan bekerja dengan aplikasi yang sudah ada, Counter. Aplikasi ini memungkinkan pengguna untuk melacak, menambah, dan mengurangi jumlah numerik. Meskipun aplikasinya sederhana, Anda akan menemukan bahwa aplikasi ini memiliki banyak masalah aksesibilitas yang menyulitkan banyak pengguna untuk berinteraksi secara benar dengan aplikasi ini.

Selama kursus codelab ini, Anda akan meningkatkan aplikasi ini dan membuatnya lebih mudah diakses. Peningkatan Anda akan membantu pengguna dengan gangguan penglihatan dan tunanetra serta pengguna dengan masalah mobilitas dan ketangkasan. Memperbaiki Counter akan memberi Anda pengetahuan dasar tentang aksesibilitas yang dapat Anda gunakan untuk meningkatkan aksesibilitas aplikasi Anda sendiri.

Mendownload Kode

Anda bisa mendapatkan kode sumber untuk versi awal aplikasi dari GitHub. Clone repo, dan buka Counter di Android Studio.

Setiap langkah dalam codelab ini terstruktur sehingga Anda mengerjakan fitur yang telah diterapkan dalam cara yang kurang dapat diakses. Pada akhir setiap langkah, Anda akan memodifikasi kode, dan Anda akan membuat layar atau fitur menjadi lebih mudah diakses.

Meluncurkan aplikasi demo

Luncurkan Android Studio dan buka project Counter. Pastikan perangkat terhubung ke komputer Anda.
Tekan ikon hijau Play dari panel menu ke bagian atas layar. Tindakan ini akan meluncurkan aplikasi Counter. Halaman landing untuk aplikasi tersebut terlihat seperti ini:

Coba gunakan aplikasi demo sebentar, menggunakan tombol penambahan ("+") dan pengurangan ("-") untuk mengubah hitungan.

Bagi banyak pengguna, ini adalah aplikasi yang mudah digunakan. Namun, beberapa pengguna sulit menggunakan aplikasi tersebut karena masalah aksesibilitas. Anda akan mengetahui lebih lanjut tentang kesulitan tersebut di codelab ini.

Pertama, Anda akan menyiapkan Accessibility Scanner, alat yang akan Anda gunakan di codelab ini untuk mengidentifikasi masalah aksesibilitas.

3. Accessibility Scanner

Accessibility Scanner adalah alat yang dibuat oleh Google yang menyarankan peningkatan aksesibilitas untuk aplikasi Android—seperti memperbesar target sentuh kecil, meningkatkan kontras, dan memberikan deskripsi konten—sehingga individu dengan kebutuhan aksesibilitas dapat menggunakan aplikasi Anda dengan lebih mudah.

Accessibility Scanner di Play Store

Anda dapat mendownload dan mengonfigurasi Accessibility Scanner menggunakan langkah berikut:

Download Accessibility Scanner dari Google Play Store.
Setelah Anda menginstal Accessibility Scanner, buka Setelan > Aksesibilitas di perangkat Anda**.** Cari dan aktifkan Accessibility Scanner (Ketuk "**Allow"** atau **"OK**", lalu "**Begin Authorization**" untuk menyelesaikan alur kerja penyiapan).
Kembali ke aplikasi Counter. Layar Anda sekarang akan terlihat seperti ini:

Anda akan melihat Accessibility Scanner membuat Tombol Tindakan Mengambang (FAB) biru, yang ditempatkan di atas konten apa pun yang Anda miliki di layar.

Anda dapat mengetuk FAB untuk memulai pemindaian aksesibilitas (Anda akan melakukannya sebentar lagi). Untuk memindahkan FAB ke area lain di layar, Anda dapat menekan lama dan menariknya.

4. Memindai Aplikasi Counter

Di bagian ini, Anda akan melakukan audit aksesibilitas layar menggunakan Accessibility Scanner:

Ketuk untuk meluncurkan pemindaian. Saat Anda melakukan hal ini, Accessibility Scanner memeriksa UI layar Anda, melakukan audit cepat untuk aksesibilitas, dan menyiapkan saran untuk peningkatan terkait aksesibilitas.
Periksa output dari menjalankan pemindaian. Ini akan terlihat seperti berikut:

Accessibility Scanner menandai tampilan yang mungkin memiliki masalah aksesibilitas, dan memberikan saran terkait cara memperbaiki masalah tersebut.

Memahami saran Accessibility Scanner

Accessibility Scanner memiliki lima saran untuk meningkatkan aksesibilitas Counter.

Kontras kurang

Accessibility Scanner menyarankan untuk memperbaiki kontras warna yang buruk pada tampilan yang menunjukkan hitungan saat ini.

Ketuk di kolom hitung, yang diperjelas dengan warna oranye di tengah layar, dan lihat saran Scanner:

Perluas error dan lihat detail cara menerapkan saran Scanner. Anda akan melihat Scanner menunjukkan kepada Anda warna latar depan dan latar belakang serta rasio kontras yang ada dan yang disarankan:

Mengapa kontras warna penting untuk aksesibilitas? Pengguna dengan gangguan penglihatan lebih sulit membaca informasi di layar jika warna latar depan dan latar belakang kurang kontras. Rasio kontras yang rendah dapat menyebabkan tampilan menjadi buram untuk beberapa pengguna, sementara rasio kontras yang tinggi membuat tampilan terlihat lebih jelas. Kesulitan yang ditimbulkan oleh rasio kontras rendah bisa makin bertambah jika situasi pencahayaannya berbeda.

Label tidak ada

Scanner menandai label yang tidak ada di ImageButtons "-" dan "+" , yang mempersulit pengguna pembaca layar untuk mengetahui tujuan kontrol ini.

Ketuk error yang terkait dengan tombol "-" dan "+", lalu baca saran yang terkait dengan label yang tidak ada:

Mengapa label yang tidak ada bermasalah untuk aksesibilitas? Pengguna tunanetra atau penyandang gangguan penglihatan menggunakan pembaca layar seperti Talkback untuk berinteraksi dengan perangkat mereka. Talkback memberitahukan konten layar kepada pengguna yang kemudian dapat berinteraksi dengan konten yang ditemukan. Saat suatu elemen tidak memiliki teks terkait (ImageButton, misalnya), Talkback tidak mengetahui cara menyampaikan tujuan elemen tersebut dengan benar kepada pengguna; dalam kasus seperti itu, Talkback secara default mungkin memberitahukan "Tombol tidak berlabel", yang tidak membantu pengguna. Saat Anda memberikan label deskriptif yang benar, Talkback dapat memberitahukannya kepada pengguna.

Target Sentuh Tidak Memadai

Selain label yang tidak ada, Scanner menyarankan untuk memperluas area yang dapat disentuh untuk tombol "-" dan "+":

Mengapa target sentuh yang kecil bermasalah untuk aksesibilitas? Banyak orang mengalami kesulitan berfokus pada target sentuh kecil di layar. Hal ini dapat terjadi karena jari mereka besar, atau karena mereka memiliki kondisi medis yang mengganggu keterampilan motorik mereka. Target sentuh kecil juga mempersulit pengguna pembaca layar untuk membuka aplikasi dengan menggerakkan jari di layar, seperti saat menggunakan fitur Sentuh untuk Pelajari di TalkBack.

Ringkasan

Anda hanya menjelajahi sebagian kecil dari fungsi yang disediakan oleh Accessibility Scanner. Namun, saran yang diberikan Accessibility Scanner—yang terkait dengan kontras warna, label item, dan target sentuh—biasanya muncul di aplikasi Android. Menerapkan saran dapat membuat aplikasi Anda jauh lebih mudah diakses. Dan perbaikannya sering kali cukup mudah.

Jadi, mari kita lakukan coding!

5. Memastikan Kontras Warna yang Cukup

Di Counter, kontras warna mudah ditingkatkan. TextView yang menampilkan hitungan menggunakan latar belakang abu-abu muda dan warna teks abu-abu:

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/grey"
   ...
 />

Anda dapat menghapus latar belakang, memilih latar belakang yang lebih terang, atau memilih warna teks yang lebih gelap. Dalam codelab ini, Anda akan memilih warna teks yang lebih gelap. Berikut adalah beberapa warna yang telah ditentukan untuk Anda di colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   ...
   <color name="lightGrey">#EEEEEE</color>
   <color name="grey">#999999</color>
   <color name="darkGrey">#666666</color>
</resources>

Buka res/layout/activity_main.xml dan ubah android:textColor="@color/grey" ke android:textColor="@color/darkGrey" :

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/darkGrey"
   ...
 />

Sekarang jalankan aplikasi, dan amati kontras yang berubah:

Sebelum	Sesudah

Rasio kontras sekarang menjadi 4,94:1, yang jauh lebih baik dari 2,45:1, yang Anda miliki sebelumnya:

	Latar belakang	Warna Teks	Rasio kontras
Sebelum	#EEEEEE	Abu-abu muda (#999999)	2,45:1
Sesudah	#EEEEEE	Abu-abu tua (#666666)	4,94:1

Jadi, bagaimanakah kontras yang memadai? Pedoman Aksesibilitas Konten Web merekomendasikan rasio kontras minimum sebesar 4,5:1 untuk semua teks, dengan rasio kontras sebesar 3,0:1 yang dianggap sesuai untuk teks besar atau teks tebal. Coba untuk memenuhi atau melebihi rasio kontras ini di aplikasi Anda.

Tekan FAB untuk memulai pemindaian lain menggunakan Accessibility Scanner, dan Anda akan melihat bahwa aplikasi tidak lagi memberikan saran terkait kontras warna:

Accessibility Scanner masih memiliki 4 saran untuk meningkatkan aksesibilitas Counter, jadi mari terus mengoptimalkan aplikasi.

6. Menambahkan Label yang Tidak Ada

Karena ImageButtons "-" dan "+" adalah label yang tidak ada, pembaca layar seperti Talkback tidak dapat menyampaikan semantik tampilan dengan benar kepada pengguna, dan hanya memberitahukan "Unlabelled, Button" saat pengguna berfokus pada salah satu tombol:

Untuk memperbaikinya, tetapkan android:contentDescription untuk setiap tombol:

<ImageButton
   android:id="@+id/subtract_button"
   ...

   android:contentDescription="@string/decrement" />

<ImageButton
   android:id="@+id/add_button"
   ...
   android:contentDescription="@string/increment" />

Pastikan Anda menggunakan string yang dilokalkan untuk deskripsi konten sehingga dapat diterjemahkan dengan benar. Untuk codelab ini, string telah ditetapkan di res/values/strings.xml.

Pembaca layar sekarang memberitahukan nilai contentDescription yang Anda berikan (diterjemahkan dengan benar ke bahasa lokal) saat pengguna pembaca layar berfokus pada tombol.

Jalankan kembali Accessibility Scanner. Anda akan melihat bahwa tidak ada saran terkait label yang hilang.

7. Membuat Target Sentuh Lebih Besar

Accessibility Scanner tetap menyarankan bahwa "-" dan "+" harus memiliki ukuran sentuh yang lebih besar. Di langkah ini, Anda akan mengikuti saran tersebut.

Dua tombol di Counter berukuran kecil (24dp X 24dp). Secara umum, Anda ingin area yang dapat disentuh dari item yang dapat difokuskan setidaknya berukuran 48dp X 48dp. Lebih besar dari itu bahkan lebih baik. Perhatikan bahwa dengan meningkatkan area yang dapat disentuh dari 24dp X 24dp menjadi 48dp X 48dp, Anda memperluas area yang dapat disentuh menjadi 4 kali lipat.

Anda memiliki beberapa opsi untuk meningkatkan area tombol yang dapat disentuh. Misalnya, Anda dapat melakukan salah satu hal berikut:

Menambahkan padding di sekitar ikon.
Menambahkan minWidth dan/atau minHeight (ini akan membuat ikon lebih besar).
Mendaftarkan TouchDelegate.

Sebelum Anda mengubah apa pun, mari kita pahami dengan lebih baik cara mengukur area tombol yang dapat disentuh.

Alat-alat dan batas tata letak

Untuk langkah ini, pastikan Anda mengaktifkan Opsi Developer di perangkat Anda.

Buka Setelan > Sistem > Opsi Developer. Pada kategori Gambar, aktifkan "Tampilkan batas tata letak". Layar Anda sekarang seharusnya menunjukkan batas klip, margin, dll. dari setiap tampilan yang terlihat.

Screenshot yang menampilkan batas tata letak di layar.

Sekarang amati batas tata letak layar Counter, dengan berfokus pada dua tombol**:**

Area yang dapat disentuh hanya meluas ke batas tata letak ikon, dan Accessibility Scanner telah memberi tahu Anda bahwa area yang dapat disentuh (24dp X 24dp) terlalu kecil. Mari kita tingkatkan area untuk kedua tombol.

Saat melihat res/layout/activity_main.xml, Anda akan melihat definisi berikut untuk dua tombol tersebut:

<ImageButton
   android:id="@+id/add_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   ... />

<ImageButton
   android:id="@+id/subtract_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
  ... />

Menambahkan beberapa padding ke setiap tampilan:

<ImageButton
   ...
   android:padding="@dimen/icon_padding"
   ... />

<ImageButton
   ...
   android:padding="@dimen/icon_padding"
  ... />

Nilai @dimen/icon_padding ditetapkan ke 12dp (lihat res/dimens.xml). Saat padding ini diterapkan, area kontrol yang dapat disentuh menjadi 48dp X 48dp (24dp + 12dp di setiap arah).

Jalankan kembali aplikasi untuk mengonfirmasi batas tata letak baru:

Sebelum	Sesudah

Kembali ke kategori Setelan > Opsi Developer > Gambar, cari "Tampilkan batas tata letak", lalu nonaktifkan.

Jalankan kembali Accessibility Scanner. Kali ini, pemindaian akan selesai tanpa saran:

Selamat, dengan menyelesaikan beberapa langkah sederhana ini, Anda telah membuat aplikasi Anda menjadi lebih mudah diakses!

8. Batasan Accessibility Scanner

Meskipun alat seperti Accessibility Scanner dapat membantu Anda membuat beberapa peningkatan signifikan pada aksesibilitas aplikasi, alat ini bukanlah pengganti untuk pengujian manual.

Aksesibilitas perlu ditanggapi secara holistik—Accessibility Scanner, misalnya, akan memberi tahu Anda jika ada komponen yang tidak memiliki label, tetapi tidak dapat menentukan apakah label tersebut masuk akal. Umumnya, Accessibility Scanner tidak dapat menentukan apakah antarmuka pengguna Anda menyampaikan informasi semantik secara sederhana dan jelas. Selain itu, Accessibility Scanner tidak dapat melaporkan seberapa baik aplikasi mendukung beberapa mode interaksi (sentuh vs. suara), atau jika pengguna berhasil menyelesaikan kasus penggunaan aplikasi Anda yang paling umum. Namun, Accessibility Scanner menyediakan pengantar aksesibilitas, dan ini adalah alat aksesibilitas yang harus sering Anda pertimbangkan untuk digunakan.

Menonaktifkan Accessibility Scanner

Buka Setelan > Aksesibilitas dan tetapkan Accessibility Scanner ke Nonaktif.

9. Link dan Referensi

Anda telah membaca banyak topik yang terkait dengan aksesibilitas Android. Berikut adalah beberapa link dan referensi yang dapat Anda jelajahi:

Untuk terus mempelajari tentang aksesibilitas Android, buka developer.android.com.
Untuk mempelajari layanan aksesibilitas lebih lanjut, buka Pusat Bantuan Aksesibilitas Android, tempat Anda dapat menemukan dokumentasi untuk TalkBack, BrailleBack, Voice Access, Tombol Akses, dan fitur aksesibilitas Android lainnya.
Baca tentang aksesibilitas dan Desain Material.