VoiceOver: apa itu, gestur kontrol dan kemampuan di iOS

Apa itu VoiceOver?

VoiceOver — adalah pembaca layar (screen reader) yang tertanam di sistem operasi Apple. Ini dirancang untuk pengguna tunanetra dan tunanetra sebagian dan menyediakan interaksi penuh dengan perangkat tanpa kontak visual. VoiceOver menyuarakan semua elemen antarmuka: tombol, tautan, teks, gambar, notifikasi, dan elemen sistem.

Teknologi ini pertama kali diperkenalkan pada tahun 2005 untuk macOS, dan di iOS muncul bersama iPhone 3GS pada tahun 2009. Sejak saat itu, VoiceOver telah menjadi bagian tak terpisahkan dari ekosistem Apple dan salah satu argumen utama untuk aksesibilitas platform. VoiceOver tertanam di tingkat sistem — artinya berfungsi di aplikasi mana pun tanpa integrasi tambahan dari pengembang, meskipun kualitas penyuaraan secara langsung tergantung pada seberapa baik aplikasi menggunakan API aksesibilitas iOS.

VoiceOver mendukung lebih dari 40 bahasa dengan sintesis suara alami dan beradaptasi dengan pengaturan suara regional. Di iOS, VoiceOver menggunakan mesin suara Siri untuk bahasa Indonesia dan bahasa lainnya, memastikan suara senatural mungkin dan intonasi yang benar tergantung pada tanda baca dan konteks.

Bagaimana cara kerja VoiceOver?

VoiceOver mencegat peristiwa sentuhan dan menafsirkannya berbeda dari input standar iOS. Saat pengguna menyentuh layar, VoiceOver tidak mengaktifkan elemen di bawah jari, tetapi terlebih dahulu menyuarakannya. Hanya setelah sentuhan ganda, elemen tersebut diaktifkan. Ini adalah perbedaan utama yang memungkinkan pengguna tunanetra menjelajahi antarmuka tanpa risiko penekanan yang tidak disengaja.

Urutan pembacaan dan navigasi

VoiceOver membaca elemen antarmuka dalam urutan logis: dari kiri ke kanan, dari atas ke bawah. Urutan pembacaan diwarisi dari hierarki tampilan iOS, tetapi pengembang dapat mengubahnya melalui properti accessibilityElements untuk tata letak yang kompleks. Pengguna dapat berpindah antar elemen dengan menggeser ke kanan (berikutnya) dan ke kiri (sebelumnya), serta menyentuh elemen tertentu untuk menyuarakannya.

Pada setiap perpindahan, VoiceOver mengucapkan jenis elemen (tombol, tautan, judul), namanya (accessibilityLabel), status (dipilih, dinonaktifkan), dan petunjuk (accessibilityHint). Jika elemen berisi nilai — misalnya, penggeser volume — VoiceOver juga menyuarakannya. Accessibility Traits (UIAccessibilityTraits) juga memberi tahu pengguna tentang perilaku elemen: apakah itu tombol, sakelar, pencarian, atau tombol keyboard.

Rotor VoiceOver

Rotor — adalah kenop pengaturan virtual yang mengganti mode navigasi VoiceOver. Pengguna memutar rotor dengan dua jari (seperti kenop volume) dan memilih mode: kata, karakter, judul, tautan, titik masuk, baris tabel, dan lainnya. Mode judul memungkinkan peralihan cepat antara H1-H6 di halaman web dan aplikasi, dan mode karakter — mengucapkan teks huruf demi huruf, yang berguna saat mengisi formulir atau memasukkan kode konfirmasi.

Pengembang dapat menambahkan mode kustom ke rotor melalui API UIAccessibilityCustomRotor. Misalnya, di aplikasi catatan, seseorang dapat menambahkan rotor „Catatan Favorit" atau „Perubahan Terbaru". Rotor kustom secara signifikan mempercepat navigasi di aplikasi tertentu dan dianggap sebagai praktik aksesibilitas terbaik di iOS.

Gestur kontrol VoiceOver

VoiceOver menggunakan kumpulan gesturnya sendiri yang tidak cocok dengan gestur standar iOS. Sebagian besar gestur dilakukan dengan tiga jari, bukan satu — ini mencegah konflik dengan kontrol biasa dan memungkinkan VoiceOver bekerja bersamaan dengan input standar.

Gestur sentuhan ganda adalah cara utama untuk mengaktifkan elemen di VoiceOver. Jika elememerlukan tindakan khusus (misalnya, menyeret), VoiceOver menggunakan urutan „sentuhan — sentuhan ganda dan tahan" untuk masuk ke mode pemindahan. Ini memungkinkan melakukan gestur kompleks seperti drag-and-drop tanpa melihat layar. VoiceOver juga mendukung gestur „sentuhan ganda dengan dua jari" untuk membatalkan tindakan dan „sentuhan tiga kali" untuk mengaktifkan/menonaktifkan tirai layar (Screen Curtain).

VoiceOver dalam pengembangan seluler

Pengembang aplikasi iOS dapat secara signifikan meningkatkan interaksi dengan VoiceOver melalui API UIAccessibility. Pengaturan aksesibilitas dasar ditambahkan di Interface Builder (Identity Inspector → Accessibility), tetapi untuk antarmuka yang kompleks, konfigurasi pemrograman dalam kode diperlukan.

Label Aksesibilitas dan Traits

Properti accessibilityLabel menentukan teks yang akan diucapkan VoiceOver untuk suatu elemen. Jika label tidak ditentukan, VoiceOver menggunakan teks tombol atau placeholder bidang teks. Untuk elemen tanpa teks (ikon, tampilan kustom), label wajib diisi. Properti accessibilityTraits menentukan jenis elemen: tombol, judul, sakelar, pencarian, tombol keyboard, nilai yang berubah, tautan, dan lainnya.

let profileButton = UIButton(type: .custom)
profileButton.setImage(UIImage(named: "avatar"), for: .normal)
profileButton.isAccessibilityElement = true
profileButton.accessibilityLabel = "Profil pengguna"
profileButton.accessibilityTraits = .button
profileButton.accessibilityHint = "Membuka layar pengaturan profil"

Bendera isAccessibilityElement mengaktifkan dukungan VoiceOver untuk tampilan kustom — secara default hanya true untuk elemen standar (UIButton, UILabel, UITextField). Parameter accessibilityHint menambahkan petunjuk: VoiceOver mengucapkannya setelah jeda jika pengguna berhenti pada elemen. Hint harus menggambarkan hasil tindakan, bukan instruksi: „Membuka layar pengaturan" alih-alih „Tekan untuk membuka".

Pengelompokan dan urutan elemen

Untuk layar kompleks di mana grup logis elemen tidak sesuai dengan urutan visual, digunakan accessibilityElements — array yang menentukan urutan pembacaan. Misalnya, kartu produk berisi gambar, nama, harga, dan tombol „Ke Keranjang". Jika elemen-elemen ini ditempatkan secara acak dalam hierarki tampilan, accessibilityElements menetapkan urutan yang benar untuk VoiceOver.

let productCard = UIView()
let productImage = UIImageView()
let productName = UILabel()
let productPrice = UILabel()
let addToCartButton = UIButton()

productCard.accessibilityElements = [
    productImage, productName, productPrice, addToCartButton
]

Untuk menggabungkan beberapa elemen menjadi satu elemen yang dapat diakses, gunakan UIAccessibilityContainer atau accessibilityFrame untuk menimpa area sentuhan. Ini berguna ketika sel tabel berisi beberapa komponen UI, tetapi secara logis mewakili satu elemen — VoiceOver harus menyuarakan seluruh sel secara keseluruhan, bukan menelusuri isinya satu per satu.

Pengaturan aksesibilitas untuk VoiceOver

Konfigurasi aksesibilitas yang benar untuk VoiceOver memerlukan perhatian pada beberapa aspek: markup semantik, pembaruan dinamis, penanganan elemen kustom, dan pengujian dengan pembaca layar nyata.

Markup semantik di SwiftUI

Di SwiftUI, aksesibilitas dikonfigurasi melalui pengubah .accessibilityLabel(), .accessibilityValue(), .accessibilityHint(), dan .accessibilityAddTraits(). SwiftUI secara otomatis mewarisi aksesibilitas dari elemen standar, tetapi untuk komponen kustom, konfigurasi eksplisit diperlukan. Misalnya, penggeser kustom harus memberi tahu VoiceOver tentang nilai dan format perubahannya.

Slider(value: $volume, in: 0...100)
    .accessibilityLabel("Volume suara")
    .accessibilityValue(
        Text("\(Int(volume)) persen")
    )
    .accessibilityAddTraits(.adjustsAudioForAccessibility)
    .accessibilityAdjustableAction { direction in
        switch direction {
        case .increment: volume = min(volume + 5, 100)
        case .decrement: volume = max(volume - 5, 0)
        }
    }

Pengubah accessibilityAdjustableAction menambahkan kemampuan untuk mengubah nilai dengan gestur VoiceOver: geser ke atas — naikkan, geser ke bawah — turunkan. Tanpa pengubah ini, penggeser tetap tidak dapat diakses untuk kontrol melalui pembaca layar. Konfigurasi serupa diperlukan untuk stepper kustom, picker, dan elemen lain yang mengubah nilainya.

Pembaruan dinamis dan notifikasi

Ketika konten di layar berubah secara dinamis (notifikasi muncul, status pemuatan diperbarui, harga berubah), VoiceOver harus menerima pemberitahuan melalui UIAccessibility.post. Tanpa panggilan ini, pembaca layar tidak akan mengetahui perubahan dan pengguna akan melewatkan informasi penting. Untuk SwiftUI, gunakan pengubah .accessibilityAnnouncement().

UIAccessibility.post(
    notification: .announcement,
    argument: "Harga turun 20 persen"
)

// SwiftUI
Text("Harga diperbarui")
    .accessibilityAnnouncement(Text("Diskon 20%"))

Notifikasi VoiceOver harus digunakan dengan bijak: pengumuman yang berlebihan mengganggu pengguna, dan ketidakhadirannya membuat aplikasi tidak dapat diakses. Strategi optimal — hanya mengumumkan perubahan yang memengaruhi alur kerja pengguna saat ini: pembaruan keranjang, status pemuatan, kesalahan validasi formulir, notifikasi obrolan. Perubahan latar belakang (waktu di bilah, nilai tukar) tidak perlu diumumkan — pengguna akan memeriksanya sendiri jika diperlukan.

Pengujian VoiceOver dilakukan melalui perangkat fisik dengan pembaca layar yang diaktifkan atau simulator iOS dengan opsi Accessibility Inspector. Penting untuk menguji skenario penggunaan penuh: tanpa kontrol visual melakukan pendaftaran, melakukan pemesanan, menemukan produk melalui pencarian. Jika jalur dapat dilalui tanpa umpan balik visual — VoiceOver dikonfigurasi dengan benar.