Accessibility — dasar-dasar, VoiceOver dan TalkBack untuk pengguna tunanetra

Apa itu Accessibility (a11y) di aplikasi mobile?

Accessibility (disingkat a11y — 11 huruf antara «a» dan «y») — praktik pengembangan aplikasi yang dapat diakses oleh penyandang gangguan penglihatan, pendengaran, motorik, dan kognitif. Dalam pengembangan mobile, accessibility mencakup empat skenario utama: pengguna tunanetra (pembaca layar), tunanetra sebagian (penskalaan, kontras), tunarungu dan kurang dengar (teks, alternatif visual untuk suara), pengguna dengan keterbatasan motorik (kontrol suara, Switch Control, area sentuh besar).

Persyaratan hukum — di banyak negara, accessibility wajib secara hukum. AS: Section 508 dan ADA. UE: European Accessibility Act (2025). Inggris: Equality Act 2010. Tanpa dukungan accessibility, aplikasi dapat menjadi sasaran gugatan hukum — di AS pada tahun 2023 diajukan lebih dari 4.000 gugatan tentang ketidakaksesibilitas produk digital. Apple dan Google memeriksa accessibility saat moderasi aplikasi: App Store Review Guidelines (4.2) dan Google Play Store mewajibkan dukungan aksesibilitas minimal.

Argumen bisnis — aksesibilitas meningkatkan audiens. Menurut Return on Disability (2021), penyandang disabilitas mengendalikan $13 triliun pendapatan disposabel per tahun. Aplikasi yang dapat diakses juga memiliki peringkat lebih baik di pencarian (HTML semantik, teks alternatif), peringkat pengguna lebih tinggi, dan lebih sedikit ulasan tentang masalah UX. Di IT Sectr kami menyertakan accessibility ke dalam definition of done semua proyek — ini adalah standar kualitas, bukan peningkatan opsional.

Accessibility di iOS: VoiceOver dan UIAccessibility

VoiceOver — pembaca layar Apple, tertanam di iOS, iPadOS dan macOS. Pengguna menggeser jari di layar, VoiceOver membacakan nama elemen di bawah jari. Ketuk dua kali — aktivasi elemen. VoiceOver mendukung lebih dari 40 gestur: tiga jari geser (menggulir), dua jari ketuk dua kali (berhenti), gestur Z (kembali). Pengembang mengontrol apa dan bagaimana VoiceOver membaca melalui protokol UIAccessibility dan properti accessibilityLabel, accessibilityTraits, accessibilityHint.

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // override accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Tombol kirim formulir" }
        set {}
    }

    // override accessibilityHint
    override var accessibilityHint: String? {
        get { return "Ketuk dua kali untuk mengirim data" }
        set {}
    }

    // override accessibilityTraits
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — penskalaan teks
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

Tipografi dinamis — Dynamic Type di iOS memungkinkan pengguna memilih ukuran teks (dari XS hingga XXXL). Pengembang menggunakan UIFontMetrics.scaledFont untuk penskalaan otomatis. Teks harus ditampilkan dengan benar di semua ukuran: baris tidak boleh terpotong, tombol harus membesar secara proporsional dengan teks. UITableView secara otomatis memperbarui tinggi sel saat ukuran teks berubah. Mengabaikan Dynamic Type berarti membuat aplikasi tidak dapat diakses oleh pengguna tunanetra sebagian.

Accessibility di SwiftUI

SwiftUI menyediakan pengubah untuk accessibility: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). Secara default, semua elemen standar SwiftUI (Text, Button, Image) sudah menjadi elemen accessibility dengan label otomatis. Untuk View kustom, gunakan .accessibilityElement(children: .combine) untuk menggabungkan elemen turunan menjadi satu. SwiftUI secara otomatis mendukung Dynamic Type dan VoiceOver.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Hapus elemen"))
    Text("Tempat sampah")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Menghapus elemen yang dipilih tanpa kemungkinan pemulihan"))

Accessibility di Android: TalkBack dan contentDescription

TalkBack — pembaca layar Google, terinstal di sebagian besar perangkat Android (tersedia di Google Play untuk semua versi Android 5+). TalkBack menggunakan gestur yang sama dengan VoiceOver: geser untuk navigasi, ketuk dua kali untuk aktivasi. Pengembang mengatur deskripsi elemen melalui atribut android:contentDescription di XML atau melalui setContentDescription() di kode. Untuk ImageView, contentDescription wajib — tanpanya TalkBack melaporkan «tidak diberi label» atau membaca nama file.

// XML: contentDescription untuk ImageView
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: pengaturan terprogram
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (kustom)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Tombol hapus"
        info.contentDescription = "Hapus elemen yang dipilih"
        info.className = Button::class.java.name
    }
}

// Live Regions untuk pembaruan dinamis
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — mekanisme Android untuk memberi tahu TalkBack tentang perubahan konten tanpa fokus. Atribut android:accessibilityLiveRegion memiliki tiga nilai: none (tanpa pemberitahuan), polite (umumkan setelah saat ini), assertive (umumkan segera). Gunakan polite untuk pembaruan status pemuatan, assertive — untuk kesalahan kritis. Penyalahgunaan assertive akan menyebabkan kekacauan bagi pengguna — TalkBack akan terus-menerus menginterupsi tindakan saat ini.

Accessibility Scanner

Accessibility Scanner — aplikasi gratis dari Google untuk menguji aksesibilitas aplikasi Android tanpa akses ke kode sumber. Pemindai memeriksa: kontras teks, ukuran area sentuh (minimal 48×48dp menurut Android Accessibility Guidelines), keberadaan contentDescription untuk ImageView, kebenaran hierarki elemen. Untuk pengujian otomatis, gunakan AccessibilityChecks dari Espresso — mereka terintegrasi dengan CI/CD dan memeriksa accessibility di setiap build.

WCAG 2.1: kontras, ukuran dan area sentuh

WCAG 2.1 (Web Content Accessibility Guidelines) — standar aksesibilitas internasional yang dikembangkan oleh W3C. Versi 2.1 (2018) mencakup 13 kriteria tambahan untuk aplikasi mobile. Tingkat kesesuaian: A (minimal), AA (wajib bagi sebagian besar organisasi), AAA (maksimal). Apple dan Google merekomendasikan level AA sebagai minimum untuk publikasi aplikasi. WCAG 2.2 dirilis pada tahun 2023 dengan klarifikasi untuk fokus dan input.

Kriteria utama untuk pengembangan mobile: kontras teks minimal 4.5:1 (AA) atau 7:1 (AAA), ukuran area sentuh minimal 44×44pt (iOS) atau 48×48dp (Android), dukungan orientasi lanskap dan potret tanpa kehilangan fungsionalitas, kemampuan mematikan animasi (prefers-reduced-motion), keberadaan teks untuk multimedia, kompatibilitas dengan kontrol suara (Voice Control di iOS, Voice Access di Android).

Alat pemeriksa kontras — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). Di IT Sectr kami memeriksa kontras pada tahap desain (Figma + Stark) dan kembali pada tahap pengembangan (Accessibility Inspector / Accessibility Scanner). Persyaratan minimal — 4.5:1 untuk semua teks kurang dari 18pt (14pt bold). Untuk logo dan elemen dekoratif, kontras tidak diperlukan.

Pengujian aksesibilitas: alat dan daftar periksa

Pengujian iOS — Accessibility Inspector di Xcode (Xcode → Open Developer Tool → Accessibility Inspector) memeriksa label, traits, hint untuk setiap elemen. VoiceOver dapat diaktifkan di pengaturan atau melalui Accessibility Shortcut (tekan tombol tiga kali). Untuk pengujian otomatis, gunakan XCUITest dengan XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement). Apple merekomendasikan menguji semua layar aplikasi dengan VoiceOver aktif.

Pengujian Android — Accessibility Scanner (Play Store) memeriksa kontras, ukuran area sentuh, contentDescription. Untuk otomatisasi: Espresso AccessibilityChecks (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Google merekomendasikan daftar periksa: setiap ImageView memiliki contentDescription, area sentuh tidak kurang dari 48×48dp, teks dapat diskalakan hingga 200% tanpa terpotong, semua elemen dapat dijangkau dengan geseran TalkBack.

Daftar periksa IT Sectr — sebelum rilis kami memeriksa: (1) VoiceOver/TalkBack membaca semua elemen dengan benar, (2) teks dapat diskalakan ke ukuran maksimal tanpa kehilangan fungsionalitas, (3) semua ImageView memiliki contentDescription, (4) kontras teks ≥4.5:1 di semua tema, (5) area sentuh ≥44pt/48dp, (6) tidak ada menu konteks yang hanya dapat diakses dengan tekan lama, (7) dukungan Reduce Motion / Remove Animations di pengaturan sistem. Daftar periksa ini menjadi bagian dari definition of done setiap sprint.