Content Description: apa itu, prinsip dan cara mengaturnya untuk accessibility

Apa itu Content Description dalam accessibility

Content Description — properti string elemen antarmuka yang menyampaikan representasi tekstual konten visual ke teknologi bantu. Screen reader (VoiceOver di iOS, TalkBack di Android) membacakan deskripsi alih-alih mencoba mengenali elemen secara visual. Deskripsi diterapkan pada gambar tanpa lapisan teks, ikon, grafik, kontrol kustom, dan elemen non-teks lainnya.

Menurut Google Material Design, 2024, elemen tanpa contentDescription melanggar aturan WCAG 1.1.1 (Non-text Content). Pemeriksaan Accessibility Scanner menunjukkan bahwa hingga 40% ikon di aplikasi toko tidak memiliki deskripsi. Pengguna VoiceOver hanya mendengar “gambar” atau “tombol” tanpa spesifikasi — antarmuka seperti itu menjadi tidak dapat digunakan untuk navigasi.

Content Description tidak menggantikan teks yang terlihat pada elemen. Jika tombol berisi label teks “Kirim”, deskripsi tambahan tidak diperlukan — screen reader akan membaca teksnya. Untuk gambar, ikon, dan kolom input, deskripsi wajib ada.

Alat Accessibility Scanner (Android) dan Xcode Accessibility Inspector (iOS) secara otomatis memeriksa keberadaan deskripsi. Disarankan untuk melakukan pemeriksaan ini di setiap layar sebelum rilis.

Mengapa Content Description diperlukan: skenario pengguna

Pengguna dengan gangguan penglihatan mengandalkan VoiceOver untuk memahami antarmuka. Jika ikon keranjang belanja tidak memiliki deskripsi, ia hanya mendengar “tombol”. Untuk mengetahui apa yang dilakukan tombol, ia harus menekannya secara buta — risiko tindakan yang tidak dapat dibatalkan. Deskripsi “Hapus produk dari keranjang” menyelesaikan masalah ini dalam satu detik.

Pengguna dengan keterbatasan sementara (sinar matahari terang di luar, layar rusak) juga menggunakan VoiceOver. Menurut Apple Accessibility Report, 2023, sekitar 20% pengguna VoiceOver tidak memiliki gangguan penglihatan permanen — mereka mengaktifkan fitur ini secara situasional.

WCAG 1.1.1: Non-text Content

Kriteria WCAG 1.1.1 (level A) mensyaratkan bahwa setiap konten non-teks harus memiliki alternatif teks. Pengecualian: konten yang bersifat dekoratif, hanya digunakan untuk desain visual, atau tidak membawa informasi. Uji dekoratif: jika elemen dihapus, apakah makna halaman berubah? Jika tidak — dapat disembunyikan dari screen reader.

Apa perbedaan Content Description dengan Label

Accessibility Label (accessibilityLabel di iOS) — nama elemen yang diucapkan screen reader saat fokus. Content Description (accessibilityHint di iOS) — penjelasan tambahan yang dibacakan setelah nama dan memberi tahu hasil tindakan.

Perbedaannya terlihat jelas pada contoh tombol “Keranjang”. Label: “Keranjang”. Description: “Akan membuka layar pemesanan”. VoiceOver mengatakan: “Keranjang. Akan membuka layar pemesanan”. Jika hanya Label yang diatur, pengguna tidak akan tahu apa yang terjadi setelah ditekan.

Tabel: Label versus Description

Aturan: Label menjawab pertanyaan “Apa ini?”, Description — “Apa yang terjadi?”. Di Android, contentDescription dapat menjalankan kedua peran, tetapi dalam praktiknya lebih baik memisahkannya: gunakan concatenation “[nama], [penjelasan]”.

Kapan Description lebih penting daripada Label

Untuk gerakan kompleks (menggeser untuk menghapus, tekan lama untuk menu konteks) accessibilityHint wajib ada. Pengguna VoiceOver tidak tahu tentang gerakan tersembunyi jika tidak dideskripsikan. Tunjukkan: “Geser ke kiri untuk menghapus” di hint elemen.

iOS: atribut accessibilityHint

Di platform iOS, accessibilityHint diatur melalui properti UIView atau NSObject. Nilai — string hingga 80 karakter. VoiceOver membaca hint setelah label jika mode deskripsi detail diaktifkan (di pengaturan VoiceOver — “Verbosity”).

Contoh pengaturan hint untuk tombol kustom:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Tambahkan ke favorit"
        self.accessibilityHint = "Akan menyimpan produk ke daftar favorit"
    }
}

Untuk UIImageView tanpa konten teks, wajib mengatur isAccessibilityElement = true dan accessibilityHint:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Grafik penjualan kuartal terakhir"

VoiceOver membaca: “Grafik penjualan kuartal terakhir”. Jika hint kosong — hanya “gambar”. Apple HIG, 2024 merekomendasikan untuk tidak menggunakan kata kerja seperti “tekan” atau “sentuh” dalam hint — VoiceOver secara otomatis menambahkan instruksi gerakan.

SwiftUI: pengubah accessibilityHint

Di SwiftUI, hint diatur melalui pengubah rantai:

Image(systemName: "trash")
    .accessibilityLabel("Hapus")
    .accessibilityHint("Akan menghapus elemen yang dipilih secara permanen")

SwiftUI secara otomatis menggabungkan pengubah untuk view gabungan. Jika Image berada di dalam Button, SwiftUI menggunakan label tombol sebagai accessibilityLabel utama.

Android: properti contentDescription

Di Android, contentDescription diatur dalam markup XML atau secara terprogram melalui setContentDescription(). TalkBack membacakan deskripsi saat fokus pada elemen.

Contoh dalam XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Pencarian produk" />

Pengaturan terprogram untuk elemen dinamis:

binding.iconSearch.contentDescription =
    "Pencarian. Akan membuka layar pencarian dengan filter"

Untuk gambar dekoratif (pemisah, latar belakang, ikon dekoratif) atur contentDescription = "@null" atau setContentDescription(null) — TalkBack akan melewati elemen tersebut. Di XML: android:contentDescription="@null". String kosong "" tidak berfungsi — TalkBack tetap mengatakan “gambar”.

Android: detail penting untuk ImageButton dan CheckBox

Untuk ImageButton selalu atur contentDescription — TalkBack tidak melihat teks pada gambar. Untuk CheckBox, deskripsi harus berubah secara dinamis: “Dipilih” / “Tidak dipilih” sebagai ganti deskripsi statis. Gunakan setContentDescription di pendengar status.

Aturan penulisan deskripsi

Informatif — deskripsi harus menyampaikan makna, bukan penampilan luar. Bukan “Ikon biru dengan centang”, tetapi “Produk ditambahkan ke keranjang”. Screen reader tidak peduli dengan warna — ia peduli dengan hasilnya.

Singkat — panjang optimal 2–4 kata (hingga 80 karakter). Deskripsi panjang memperlambat navigasi: VoiceOver membaca secara berurutan, setiap kata adalah satu detik waktu pengguna. Menurut Apple WWDC 2023, “Accessibility by Design”, frasa yang lebih dari 5 detik bacaan mengganggu aliran kognitif.

Unik — tidak boleh ada dua elemen dengan deskripsi yang sama dalam satu layar. Pengguna tidak akan dapat membedakan hasil fokus pada elemen pertama dan kedua. Jika ada beberapa tombol “Beli” — tambahkan pengidentifikasi: “Beli iPhone 15”, “Beli iPhone 15 Pro”.

Lokalisasi — Content Description diterjemahkan ke semua bahasa yang didukung aplikasi. Kesalahan lokalisasi deskripsi adalah salah satu penyebab umum kegagalan Accessibility Review di App Store.

Panjang deskripsi: penelitian

Penelitian Nielsen Norman Group, 2024 menunjukkan bahwa panjang optimal deskripsi untuk screen reader adalah 3–5 kata (hingga 50 karakter). Deskripsi yang lebih panjang mengurangi kecepatan navigasi sebesar 30%, karena pengguna harus menunggu pembacaan selesai sebelum langkah selanjutnya.

Kesalahan umum dalam penggunaan

Redundansi — deskripsi menduplikasi teks yang terlihat. Jika tombol berisi teks “Kirim”, jangan atur accessibilityHint = “Tombol kirim”. VoiceOver akan membaca teks secara otomatis, dan hint akan menambah kebisingan yang tidak perlu.

Kebingungan dengan Label — menggunakan contentDescription sebagai pengganti label untuk tombol teks. Di iOS, accessibilityLabel harus cocok dengan teks tombol (atau kosong jika teks sudah terlihat), dan hint hanya menjelaskan tindakan. Menurut Google Testing Blog, 2024, 23% aplikasi yang diperiksa di Play Store memiliki deskripsi duplikat.

Mengabaikan dinamika — deskripsi tidak diperbarui saat status berubah. Misalnya, pada sakelar “Wi-Fi” deskripsi tetap “Aktifkan Wi-Fi” bahkan setelah diaktifkan. Benar: ubah deskripsi secara dinamis menjadi “Nonaktifkan Wi-Fi” melalui observasi status.

Siklus render dan regresi

Setelah pembaruan desain (perubahan ikon, penyusunan ulang elemen), Content Description sering hilang. Penyebab: desainer mengganti gambar, pengembang tidak memeriksa properti aksesibilitas aset baru. Solusi: jadikan pemeriksaan aksesibilitas sebagai langkah wajib dalam code review — tambahkan daftar periksa dengan poin “Content Description diperbarui?”.

Cara memeriksa Content Description

• Di iOS: Xcode → Accessibility Inspector — pilih elemen, periksa bidang Label dan Hint
• Di Android: instal Accessibility Scanner dari Play Store — jalankan di layar Anda
• Di kedua platform: aktifkan VoiceOver/TalkBack dan jelajahi seluruh layar dengan gerakan
• Tulis tes UI yang memeriksa contentDescription untuk semua ImageView

Contoh tes UI untuk iOS

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}