Membuat aplikasi lebih mudah diakses

Coba buat aplikasi Android Anda dapat digunakan oleh semua orang, termasuk orang dengan kebutuhan aksesibilitas.

Orang dengan gangguan penglihatan, buta warna, gangguan pendengaran, gangguan ketangkasan, gangguan kognitif, dan banyak gangguan lainnya menggunakan perangkat Android. Saat mengembangkan aplikasi dengan mempertimbangkan aksesibilitas, Anda akan membuat pengalaman pengguna menjadi lebih baik bagi orang yang memiliki kebutuhan aksesibilitas tersebut.

Halaman ini menyajikan pedoman untuk mengimplementasikan elemen utama aksesibilitas sehingga semua orang dapat menggunakan aplikasi Anda dengan lebih mudah. Untuk panduan yang lebih mendalam mengenai cara membuat aplikasi Anda lebih mudah diakses, lihat Prinsip-prinsip untuk meningkatkan aksesibilitas aplikasi.

Meningkatkan visibilitas teks

Untuk setiap kumpulan teks dalam aplikasi, sebaiknya gunakan kontras warna—atau perbedaan kecerahan yang dirasakan antara warna teks dengan warna latar belakang teks—untuk berada di atas nilai minimum tertentu. Nilai minimum yang tepat tergantung pada ukuran font teks dan apakah teks muncul dalam cetak tebal:

  • Jika teks lebih kecil dari 18 sp, atau jika teks dicetak tebal dan lebih kecil dari 14 sp, gunakan warna latar depan dan latar belakang yang menghasilkan rasio kontras warna minimal 4,5:1.
  • Untuk semua teks lainnya, setel rasio kontras warna setidaknya 3:1.

Gambar berikut menampilkan dua contoh kontras warna teks dengan latar belakang:

Dua contoh kata 'Teks' pada latar belakang berwarna. Contoh di sebelah kiri memiliki kontras warna yang rendah antara teks dan latar belakang, sedangkan contoh di sebelah kanan memiliki kontras warna yang memadai.
Gambar 1. Kontras warna lebih rendah dari yang direkomendasikan (kiri) dan kontras warna yang memadai (kanan).

Untuk memeriksa kontras warna teks dengan latar belakang di aplikasi Anda, gunakan pemeriksa kontras warna online atau aplikasi Accessibility Scanner.

Menggunakan kontrol yang besar dan sederhana

UI aplikasi Anda lebih mudah digunakan jika kontrolnya lebih mudah dilihat dan diketuk. Untuk antarmuka sentuh, sebaiknya setiap elemen UI interaktif memiliki area yang dapat difokuskan, atau ukuran target sentuh, setidaknya 48 dp x 48 dp. Ukuran yang lebih besar akan lebih baik.

Di Jetpack Compose, banyak komponen Material bawaan seperti Button, IconButton, dan ListItem sudah menerapkan ukuran minimum ini. Namun, saat membuat elemen interaktif kustom, Anda harus menetapkan ukuran sendiri.

Dalam cuplikan berikut, elemen UI kecil dibuat dapat diakses dengan memberikan target sentuh yang lebih besar:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

Untuk mengetahui informasi selengkapnya tentang ukuran target sentuh, lihat Ukuran target sentuh minimum.

Menjelaskan setiap elemen UI

Untuk setiap elemen UI di aplikasi Anda, sertakan deskripsi yang menjelaskan tujuan elemen. Pada kebanyakan kasus, Anda menyertakan deskripsi ini di atribut contentDescription elemen, seperti ditampilkan dalam cuplikan kode berikut:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

Perhatikan bahwa Anda tidak perlu memberikan contentDescription untuk composable Text. Layanan aksesibilitas Android (seperti TalkBack) otomatis mengucapkan teks itu sendiri.

Saat menambahkan deskripsi ke elemen UI aplikasi, lakukan praktik terbaik berikut:

  • Gunakan deskripsi untuk menyampaikan tujuan dan hasil interaksi, bukan detail visual. Gunakan properti semantik Role (seperti Role.Button atau Role.Switch) untuk mengekspos jenis elemen UI. Dengan begitu, pembaca layar dapat mengumumkan elemen dengan benar.

  • Hindari pengulangan yang tidak perlu dalam deskripsi. Misalnya, jika memilih tombol menyebabkan tindakan "kirim" terjadi di aplikasi, buat deskripsi tombol "Submit", bukan "Submit button".

  • Setiap deskripsi harus unik. Dengan begitu, saat pengguna pembaca layar menemukan deskripsi elemen berulang, mereka akan mengenali dengan benar bahwa fokus berada pada elemen yang telah memiliki fokus sebelumnya. Secara khusus, setiap item dalam daftar seperti LazyColumn harus memiliki deskripsi yang berbeda, yang masing-masing mencerminkan konten yang unik untuk item tertentu, seperti nama kota dalam daftar lokasi.

  • Gunakan hideFromAccessibility API untuk menandai elemen yang murni dekoratif sehingga layanan aksesibilitas dapat mengabaikannya. Jika elemen UI memiliki parameter contentDescription, tetapi murni dekoratif (seperti Icon yang merupakan bagian dari elemen UI lain), teruskan null untuk menghindari pemberian label yang berlebihan. Untuk kasus penggunaan yang lebih rumit, lihat Menggabungkan dan menghapus.

  • Uji kode Anda untuk memastikan deskripsi konten dikirimkan sesuai harapan. Android Lint, pengujian Compose, dan alat pengujian manual dan otomatis dapat menandai masalah umum dan memaparkan masalah dalam penerapan Anda.

Referensi lainnya

Untuk mempelajari lebih lanjut cara menjadikan aplikasi lebih mudah diakses, lihat referensi tambahan berikut:

Codelab

Video

Melihat konten