Belajar Mobile Developer - Accessibility Mobile

#Pendahuluan

Setelah episode 24 memperluas Fitku ke widget dan smartwatch, kini dimensi kualitas terakhir yang sering diabaikan: accessibility. Episode 25 ini membahas accessibility mobile — screen reader (TalkBack/VoiceOver), touch targets, dynamic type, dan kontras warna — lalu menutupnya dengan audit aksesibilitas Fitku.

Mengapa ini penting? Sekitar 1 dari 7 orang di dunia hidup dengan disabilitas, dan pengguna ponsel sangat beragam: ada yang memakai screen reader, memperbesar teks 3x, atau menavigasi hanya dengan tombol. Regulasi (seperti EU Accessibility Act) makin menuntut, dan kedua store makin ketat dalam review. Lebih dari itu, aksesibilitas adalah kualitas produk: tombol yang cukup besar dan teks yang kontras baik juga membantu semua orang. Ini pelengkap dimensi etika yang kita mulai di episode 20.

#Prinsip: Akses untuk Semua

Web Content Accessibility Guidelines (WCAG) merangkumnya dalam POUR:

• Perceivable — informasi bisa dipersepsi (termasuk oleh screen reader).
• Operable — bisa dioperasikan (keyboard, sentuhan besar, voice).
• Understandable — mudah dimengerti.
• Robust — bekerja dengan berbagai teknologi bantuan.

Di mobile, keempat prinsip ini diterjemahkan ke praktik konkret di bawah.

#Screen Reader: TalkBack & VoiceOver

TalkBack (Android) dan VoiceOver (iOS) membacakan isi layar dengan gesekan & sentuhan. Syaratnya: setiap elemen penting punya nama yang dibacakan.

Semantics di Jetpack Compose

Icon(
    imageVector = Icons.Default.PlayArrow,
    contentDescription = "Mulai latihan",
    modifier = Modifier.clickable { startWorkout() }
)
 
// grup yang dibaca sebagai satu kesatuan
Text(
    "Langkah hari ini: 8.432 dari target 10.000",
    modifier = Modifier.semantics { mergeDescendants() }
)

Di SwiftUI dan React Native caranya serupa:

Button(action: startWorkout) {
    Image(systemName: "play.fill")
}
.accessibilityLabel("Mulai latihan")
.accessibilityHint("Memulai workout lari selama 30 menit")

<TouchableOpacity
  accessibilityLabel="Mulai latihan"
  accessibilityRole="button"
  onPress={startWorkout}
>
  <Icon name="play" />
</TouchableOpacity>

#Touch Targets & Spacing

Target sentuh yang terlalu kecil membuat frustrasi semua orang, dan praktis mustahil bagi sebagian pengguna. Standar minimum 48x48 dp (Material) / 44 pt (Apple):

• Tombol, ikon, dan item daftar yang bisa diklik harus memenuhi ukuran target.
• Beri spacing antar target agar tidak salah sentuh.
• Jika ikon kecil secara visual, tambahkan touch padding agar area klik lebih besar.

Memperbesar area sentuh

Icon(
    imageVector = Icons.Default.Close,
    contentDescription = "Tutup",
    modifier = Modifier
        .size(24.dp)
        .clickable { onClose() }
        .padding(12.dp) // area efektif menjadi 48dp
)

#Dynamic Type & Font Scaling

Pengguna dengan gangguan penglihatan memperbesar teks sistem hingga 200% atau lebih. Aplikasi harus mengikuti:

• Gunakan text scale/sp (bukan dp) dan hindari ukuran font yang di-hardcode.
• Layout harus mengalir saat teks membesar — jangan potong.
• Uji di ukuran font maksimum.

Text("Sisa latihan: 12 menit")
    .font(.body)           // otomatis mengikuti Dynamic Type
    .lineLimit(nil)        // jangan potong saat membesar

Di Compose, pastikan Text memakai style dari Material Theme (yang berbasis sp), bukan fontSize hardcoded dalam dp.

#Warna, Kontras & Bukan Hanya Warna

• Kontras teks minimal 4.5:1 terhadap latar (AA) — cek dengan kontras checker.
• Jangan sampaikan informasi hanya lewat warna (contoh: "tombol merah = berbahaya") — sertakan ikon atau label.
• Hati-hati dengan buta warna (merah-hijau paling umum): gunakan pola/teks sebagai pelengkap.

Teks abu-abu #757575 di atas putih #FFFFFF
→ rasio kontras 4.6:1 → lolos AA untuk teks normal
→ jika #999999 (3.0:1) → gagal, hanya boleh untuk teks besar

#Praktik: Audit Aksesibilitas Fitku

[ ] Navigasi lengkap dengan TalkBack & VoiceOver dari login sampai logout
[ ] Semua ikon punya contentDescription/accessibilityLabel
[ ] Semua target sentuh >= 48dp / 44pt
[ ] Teks mengikuti dynamic type hingga ukuran maksimum
[ ] Kontras teks >= 4.5:1, tidak ada info hanya via warna
[ ] Tombol & form memiliki label & fokus yang jelas

Gunakan alat bantu: TalkBack (AOSP), VoiceOver (Apple), Accessibility Scanner (Android) untuk menemukan target sentuh & kontras bermasalah, serta axe untuk React Native. Buat audit aksesibilitas sebagian dari definisi done, bukan aktivitas terpisah di akhir.

#Common Pitfalls Accessibility

• Ikon tanpa label: ikon play dengan contentDescription kosong = "tak bernama" bagi screen reader.
• Teks sebagai gambar: angka langkah dirender sebagai image → tidak terbaca TalkBack.
• Kontras abu-abu di atas abu-abu: trendi secara desain, membunuh keterbacaan.
• Mengabaikan urutan fokus: layout visual berubah tapi urutan baca screen reader berantakan.
• Menonaktifkan scaling: userScalable=no atau hardcode ukuran font = memutus akses.

#Penutup

Pada episode 25 ini, kalian telah menjadikan Fitku inklusif:

• Screen reader (TalkBack/VoiceOver) dengan label, role, dan hint yang tepat.
• Touch targets minimal 48dp/44pt dengan spacing yang aman.
• Dynamic type dan kontras warna sesuai WCAG AA.
• Audit aksesibilitas sebagai bagian rutin dari pengembangan.

Dengan aplikasi yang berfungsi, tahan offline, hadir di widget/watch, dan inklusif, kita kini mundur selangkah melihat gambaran besar: di episode 26 kita bahas Ekosistem & Tren Modern 2026 — lanskap cross-platform, posisi AI, dan cara memilih stack yang tepat. Sampai jumpa!