Belajar Jetpack Compose - Accessibility & Internationalization

#Pendahuluan

Aplikasi yang baik melayani semua orang — termasuk pengguna yang memakai screen reader seperti TalkBack, dan pengguna dari berbagai bahasa dan budaya. Dua bidang ini, aksesibilitas dan internasionalisasi, sering dianggap setelah fitur selesai. Episode 13 mengubah urutan itu.

Di Compose, aksesibilitas bekerja lewat Semantics API: lapisan deskripsi yang dibaca TalkBack dan dipakai untuk fokus. Sementara itu, internasionalisasi memakai resource Android yang sama seperti aplikasi view tradisional.

Episode 13 ini meliputi Semantics, fokus dan screen reader, lokalisasi, RTL, dan formatting yang sadar locale.

#Semantics API dan Accessibility Properties

#Content Description

Elemen dekoratif dan gambar perlu deskripsi agar TalkBack bisa membacanya. contentDescription adalah jalur paling dasar:

Content description

Icon(
    painter = painterResource(R.drawable.ic_keranjang),
    contentDescription = "Keranjang belanja"
)

contentDescription memberitahu TalkBack makna ikon. Untuk ikon dekoratif murni yang tidak punya makna, gunakan string kosong: contentDescription = "" membuat TalkBack melewatinya.

#Semantics Kustom

Saat komponen kustom, perjelas makna lewat modifier semantics:

Semantics kustom

Modifier.semantics {
    contentDescription = "Suhu sekarang"
    stateDescription = "25 derajat"
}

Blok semantics mendeskripsikan elemen ke layanan aksesibilitas. Untuk elemen yang benar-benar dekoratif dan harus dilewati, gunakan Modifier.clearAndSetSemantics {} — ini juga membantu efisiensi screen reader.

#Merging dan Test Tags

Elemen yang berkelompok kadang perlu dibaca sebagai satu kesatuan:

Merge semantics

Row(
    modifier = Modifier
        .clickable(onClick = onPilih)
        .mergeDescendants()
) {
    Icon(...)
    Text("Opsi A")
}

mergeDescendants() menggabungkan deskripsi anak menjadi satu node — penting untuk item yang seluruhnya bisa diklik, sehingga TalkBack membacanya sekaligus.

#Fokus dan Dukungan Screen Reader

#Urutan Fokus

TalkBack menavigasi dengan fokus aksesibilitas. Urutan default mengikuti posisi layout, tapi bisa diatur:

Fokus order

Modifier.focusProperties {
    next = fokusBawah
}

focusProperties mengatur elemen fokus berikutnya dan sebelumnya. Untuk layar kompleks, pastikan urutan fokus logis — bukan sekadar urutan posisi.

#Menguji dengan TalkBack

Uji aplikasi dengan TalkBack dari perangkat atau emulator:

adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback

adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback mengaktifkan TalkBack langsung dari terminal. Gesek layar untuk menavigasi fokus dan pastikan setiap elemen terbaca dengan jelas.

#Lokalisasi dan Internasionalisasi

#String Resources

Konten yang bisa dilokalkan disimpan di values/strings.xml, bukan di-hardcode di kode:

<resources>
    <string name="salam">Halo</string>
    <string name="kata_terima_kasih">Terima kasih</string>
</resources>

Akses di Compose dengan stringResource:

Membaca string resource

Text(stringResource(R.string.salam))

stringResource(R.string.salam) mengambil string sesuai locale aktif. Menyimpan teks di resource memungkinkan penerjemahan tanpa menyentuh kode.

#Konfigurasi Locale

Buat folder values-en untuk Inggris, values-ja untuk Jepang, dan seterusnya, masing-masing dengan strings.xml terjemahannya. Android memilih file yang sesuai locale perangkat secara otomatis.

#RTL Support dan Formatting

#Layout Direction

Bahasa seperti Arab dan Ibrani dibaca dari kanan ke kiri. Compose mendukung RTL secara otomatis: Row dan Arrangement mengikuti layoutDirection:

Sadar RTL

Row(
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("Awal")
    Text("Akhir")
}

Jangan pakai koordinat absolut seperti padding(start = ...) yang dibalik manual; pakai Start dan End yang sudah sadar arah. Dengan begitu layout berpindah otomatis di locale RTL.

#Format yang Sadar Locale

Angka, tanggal, dan mata uang diformat sesuai locale dengan resource atau java.text.NumberFormat:

Format jumlah

val jumlah = stringResource(
    R.string.harga,
    hargaTerformat
)

R.string.harga bisa berisi placeholder seperti "Harga: %1$s" yang diisi format harga dari locale. Hindari menampilkan angka mentah; format dulu agar pengguna internasional terbaca.

#Penutup

Episode 13 membuat aplikasi inklusif: Semantics API dengan contentDescription dan semantics kustom, urutan fokus dan pengujian dengan TalkBack, lokalisasi lewat string resources, dukungan RTL yang otomatis mengikuti layoutDirection, serta formatting yang sadar locale.

Inti yang harus dibawa pulang:

• contentDescription memberi makna ke ikon dan gambar untuk TalkBack.
• Modifier semantics mendeskripsikan komponen kustom.
• mergeDescendants menggabungkan elemen yang diklik sebagai satu.
• Teks disimpan di resources agar mudah dilokalkan.
• Gunakan Start dan End, bukan kiri-kanan, untuk dukungan RTL.
• Format angka dan mata uang sesuai locale pengguna.

Di episode 14 selanjutnya kita akan membahas testing Compose UI — unit testing composable, UI test dengan Compose testing framework, semantics assertions dan test tags, serta integration testing dari UI ke lapisan data.