Accessibility Label — apa itu, dasar-dasar dan cara menggunakan untuk iOS dan Android

Apa itu Accessibility Label

Accessibility Label adalah properti string yang menentukan nama elemen untuk teknologi bantu. Ketika pengguna menggesekkan jari di layar dengan VoiceOver aktif, pembaca layar membacakan Label elemen yang sedang menjadi fokus. Tanpa label, pengguna hanya mendengar jenis elemen: “tombol”, “gambar” — tanpa menyebutkan tujuannya.

Menurut Google I/O 2024, “Accessibility Testing”, 35% pelanggaran aksesibilitas kritis di aplikasi toko terkait dengan tidak adanya atau ketidaktepatan Label. Accessibility Scanner di Android mendeteksi tidak adanya label sebagai kesalahan dengan tingkat keparahan tertinggi.

Batasan prinsip: Label tidak boleh mengandung jenis elemen. VoiceOver dan TalkBack secara otomatis menambahkan peran (button, header, link) dalam pengumuman. Jika Label berisi “Tombol kirim”, pengguna akan mendengar: “Tombol kirim, tombol” — duplikasi.

Label dan WCAG 4.1.2: Name, Role, Value

WCAG 4.1.2 (tingkat A) mensyaratkan setiap elemen antarmuka pengguna memiliki nama (name), peran (role), dan nilai (value) yang dapat ditentukan secara terprogram. Accessibility Label menyediakan nama. Jika Label tidak ada, kriteria dianggap dilanggar dan aplikasi tidak lulus sertifikasi dasar.

iOS: properti accessibilityLabel

Di iOS, accessibilityLabel diwarisi oleh semua UIView dari protokol UIAccessibility. Jika elemen berisi teks (UIButton dengan title, UILabel dengan text), Label secara otomatis diatur sama dengan teks tersebut. Untuk UIImageView, kontrol kustom, dan penampung, Label perlu diatur secara manual.

Contoh untuk sel tabel kustom:

class CustomTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    let priceLabel = UILabel()

    override func awakeFromNib() {
        super.awakeFromNib()
        self.isAccessibilityElement = true
        self.accessibilityLabel =
            "\(titleLabel.text ?? "") - \(priceLabel.text ?? "")"
    }
}

Untuk UIView kustom, getter accessibilityLabel dapat di-override:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "Penilaian: \(rating) dari 5" }
        set {}
    }
}

Apple HIG, 2024 menyarankan: jika elemen terdiri dari beberapa sub-elemen (misalnya, kartu produk dengan nama dan harga), gabungkan mereka menjadi satu elemen aksesibilitas dengan Label komposit. Atur isAccessibilityElement = true pada induk dan false pada anak.

NSAttributedString dan accessibilityLabel

Jika UILabel menggunakan NSAttributedString, accessibilityLabel secara default sama dengan .string (teks biasa). Jika perlu menyampaikan nilai yang secara semantik berbeda (misalnya, ikon-simbol yang dibaca sebagai “Bintang” alih-alih simbol ★), atur accessibilityLabel secara eksplisit. VoiceOver tidak membaca simbol Unicode secara bermakna.

Android: Label melalui contentDescription

Di Android, contentDescription berfungsi sebagai Label untuk ImageView, ImageButton, dan View kustom. Untuk TextView dan Button dengan teks bawaan, tidak perlu mengatur contentDescription — TalkBack membaca teks secara otomatis.

Pengaturan terprogram melalui Kotlin:

binding.iconStar.contentDescription = "Produk di favorit"

// Untuk tampilan kustom dengan beberapa elemen
binding.customCard.setContentDescription(
    "\(title) sebesar \(price)")

Dalam XML untuk elemen dekoratif:

<ImageView
    android:contentDescription="@null"
    android:src="@drawable/divider"
    android:importantForAccessibility="no" />

Properti importantForAccessibility = "no" sepenuhnya mengecualikan elemen dari pohon aksesibilitas. Di iOS, padanannya adalah isAccessibilityElement = false.

Compose: semantics dan contentDescription

Di Jetpack Compose, Label diatur melalui pengubah semantics:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "Pencarian produk",
    modifier = Modifier.semantics {
        contentDescription = "Pencarian produk"
    }
)

Di Compose, contentDescription adalah parameter wajib untuk Image — tanpanya kode tidak akan dikompilasi (peringatan). Ini memaksa peningkatan aksesibilitas melalui desain API.

Label dan Hint: perbedaan peran

Accessibility Label menjawab pertanyaan “Elemen apa ini?”. Hint (accessibilityHint di iOS, teks tambahan di contentDescription di Android) — “Apa yang akan terjadi saat interaksi?”. VoiceOver mengucapkannya secara berurutan: pertama Label, lalu Hint.

Contoh untuk tombol hapus:

• Label: “Hapus”
• Hint: “Akan menghapus foto yang dipilih secara permanen”
• VoiceOver: “Hapus. Akan menghapus foto yang dipilih secara permanen”

Menurut Deque University, 2024, pemisahan Label dan Hint yang benar meningkatkan tingkat keberhasilan penyelesaian tugas untuk pengguna VoiceOver sebesar 28%. Pengguna dengan gangguan kognitif sangat bergantung pada Hint: dengan risiko menekan “Hapus” tanpa penjelasan, 40% menolak untuk bertindak.

Kapan Hint tidak diperlukan

• Elemen dengan tindakan yang intuitif (“Kembali”, “Tutup” — Label sudah cukup)
• Label sudah menjelaskan hasil (“Kirim pesan” — kata kerja dalam nama itu sendiri)
• Kontrol sistem (UISwitch, UIButton dengan tipe sistem) — perilakunya standar

Kesalahan dari praktik: Label sebagai pengganti Hint

Kesalahan umum: dalam Label ditulis “Tombol hapus” alih-alih “Hapus”. Jenis elemen (tombol) ditambahkan secara otomatis oleh VoiceOver melalui trait. Akibatnya pengguna mendengar: “Tombol hapus, tombol” — duplikasi. Label yang benar: “Hapus”, Hint: “Akan menghapus foto yang dipilih”.

Lokalisasi dan praktik terbaik

Lokalisasi label wajib dilakukan — melalui mekanisme standar: NSLocalizedString di iOS, sumber daya string @string/ di Android. Jangan pernah mengatur Label dengan penggabungan dalam bahasa Inggris tanpa lokalisasi.

Aturan Label yang baik, berdasarkan W3C WCAG 2.2:

• Mulailah dengan kata kunci — “Pencarian produk”, bukan “Bidang untuk pencarian produk”
• Jangan sertakan kata “tombol”, “bidang”, “gambar” — peran ditambahkan secara otomatis
• Gunakan bahasa alami, yang dapat dipahami oleh audiens target
• Hindari singkatan (kecuali yang diterima umum: “buah”, “kg”) — pembaca layar membacanya secara harfiah
• Untuk elemen input, tambahkan contoh: “Email (example@domain.com)”

Konsistensi Label dalam merek

Gunakan glosarium seragam untuk Label dalam aplikasi. Jika di satu layar tertulis “Favorit” dan di layar lain “Penanda”, pengguna menjadi bingung. Buat tabel istilah aksesibilitas — koordinasikan dengan desainer dan pelokalisasi.

Label untuk elemen formulir

Untuk bidang input (UITextField, EditText), Label harus cocok dengan placeholder atau judul bidang. Namun placeholder sering menghilang setelah teks dimasukkan. Gunakan accessibilityLabel untuk nama permanen dan accessibilityValue untuk konten bidang saat ini — ini adalah standar WCAG 4.1.2. Solusi: atur accessibilityLabel secara statis (sama dengan judul bidang), dan accessibilityValue secara dinamis (sama dengan teks yang dimasukkan). Di iOS ini otomatis, tetapi untuk bidang kustom — secara manual melalui override accessibilityValue. Periksa bahwa VoiceOver membaca: “Email, example@domain.com, bidang teks” alih-alih “, bidang teks”.

Cara menguji label aksesibilitas

Pengujian terotomatisasi adalah satu-satunya cara untuk menjamin kebenaran Label di semua layar. iOS menyediakan XCUIApplication dengan akses ke .label, Android — AccessibilityCheckRule dan setContentDescription.

Contoh tes untuk iOS:

func testLabelsAreUnique() {
    let app = XCUIApplication()
    app.launch()
    let allButtons = app.buttons.allElementsBoundByIndex
    let labels = allButtons.compactMap { $0.label }
    let uniqueLabels = Set(labels)
    XCTAssertEqual(labels.count, uniqueLabels.count,
        "Label duplikat ditemukan")
}

Contoh untuk Android dengan Espresso:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("Kirim"))
        ))
}

Pengujian manual: aktifkan VoiceOver (iOS) atau TalkBack (Android) dan geser ke kanan melewati semua elemen layar. Setiap elemen harus mendapatkan pengumuman yang bermakna. Jika Anda hanya mendengar “tombol” atau “gambar” — Label tidak ada.

Rotor VoiceOver dan navigasi cepat

Setelah mengonfigurasi Label, pengguna VoiceOver dapat menggunakan rotor untuk navigasi cepat: mode “Tombol”, “Judul”, “Tautan” dan lainnya. Jika Label diatur dengan benar, VoiceOver memasukkan elemen ke dalam mode rotor yang sesuai. Periksa bahwa semua tombol terlihat dalam mode “Tombol” dan semua judul dalam “Judul”.

Label juga memengaruhi pencarian VoiceOver. Pengguna dapat memasukkan kata dalam mode pencarian, dan VoiceOver akan memindahkan fokus ke elemen dengan Label yang cocok. Oleh karena itu, Label harus berisi kata kunci yang akan digunakan pengguna untuk mencari elemen.

Integrasi ke dalam pipeline CI/CD

Tambahkan pemeriksaan Label ke dalam pipeline. Di iOS, gunakan XCUITest dengan fastlane scan. Di Android — Accessibility Test Framework dengan aturan AccessibilityCheckRule yang mendeteksi contentDescription kosong. Ini mencegah regresi saat menggabungkan layar baru.