Navigasi Analitis Desktop & Mobile: Menggunakan Screen Reader untuk Audit

Navigasi Analitis Desktop & Mobile: Menggunakan Screen Reader untuk Audit

Selamat datang di kurikulum pelatihan auditor Access Squad. Dalam modul komprehensif ini, kita akan mengeksplorasi disiplin penting dari Navigasi Analitis menggunakan screen reader (pembaca layar) di platform desktop dan mobile.

Sebagai auditor aksesibilitas, cara kita menggunakan screen reader pada dasarnya berbeda dengan pengguna sehari-hari. Sementara pengguna awam mengandalkan screen reader untuk mengonsumsi konten dan menyelesaikan tugas harian dengan cepat, auditor menggunakan alat yang sama untuk menginterogasi, membongkar, dan mengevaluasi struktur dasar dari antarmuka digital. Panduan ini akan membekali Anda dengan keterampilan teknis untuk beralih dari sekadar "browsing sebagai pengguna" menjadi "menginterogasi sebagai auditor," memanfaatkan fitur-fitur lanjutan dari NVDA, JAWS, iOS VoiceOver, dan Android TalkBack.

Pergeseran Pola Pikir: Browsing vs. Menginterogasi

Untuk mengaudit properti digital secara efektif, Anda harus terlebih dahulu memahami perbedaan antara sekadar menjelajah (browsing) dan menginterogasi antarmuka.

Browsing sebagai Pengguna

Ketika seorang penyandang disabilitas netra menjelajahi situs web atau aplikasi, tujuan utama mereka adalah mengekstrak informasi atau menyelesaikan transaksi. Mereka menggunakan tombol pintas (shortcut) (seperti menekan 'H' untuk heading atau 'B' untuk tombol) agar dapat melewati konten yang tidak relevan dengan cepat. Jika mereka menemui hambatan, mereka mungkin mencoba mencari jalan pintas atau meninggalkan halaman tersebut sepenuhnya. Navigasi mereka bersifat fungsional dan berorientasi pada tujuan akhir.

Menginterogasi sebagai Auditor

Tujuan seorang auditor aksesibilitas sangat berbeda. Anda tidak hanya "membaca" halaman; Anda sedang membedah anatominya. Menginterogasi berarti dengan sengaja menavigasi ke area antarmuka yang kompleks, bermasalah, atau tersembunyi untuk mengevaluasi kepatuhan terhadap Pedoman Aksesibilitas Konten Web (WCAG). - Anda tidak sekadar melewati konten; Anda menganalisis urutan konten tersebut (Focus Order). - Anda tidak hanya mendengarkan label tombol; Anda memverifikasi Nama (Name), Peran (Role), dan Nilai (Value)-nya. - Anda secara aktif menguji kondisi batas (boundary conditions), seperti berinteraksi dengan modal dialog, widget kustom, dan pembaruan dinamis (ARIA live regions).

Untuk melakukan interogasi ini, kita memanfaatkan fitur analitis yang tertanam di dalam screen reader.

---

Screen Reader Desktop: Perangkat Utama Auditor

Screen reader desktop seperti NVDA (NonVisual Desktop Access) dan JAWS (Job Access With Speech) adalah ujung tombak dalam pengujian aksesibilitas. Keduanya menawarkan alat analitis spesifik yang mutlak diperlukan untuk audit yang menyeluruh.

1. Speech Viewer / Text Viewer (Visualisasi Teks)

Alat: - NVDA: Speech Viewer (Ditemukan di Menu NVDA > Tools > Speech Viewer) - JAWS: Text Viewer / Speech History

Aplikasi untuk Auditor: Bagi auditor awas (sighted) atau mereka yang perlu mendokumentasikan kata-kata yang diucapkan secara persis untuk laporan bug, Speech Viewer tidak bisa ditawar lagi. Alat ini menampilkan teks persis (exact text strings) yang disintesis oleh screen reader ke dalam jendela teks visual.

Alih-alih mendengarkan ulang pengumuman widget ARIA yang kompleks berkali-kali untuk menyalinnya, auditor dapat melihat Speech Viewer dan menyalin output pastinya. Misalnya, jika sebuah tombol dengan tidak tepat diumumkan sebagai "Submit, unlabelled, button, graphic," Speech Viewer memberikan bukti otentik yang dibutuhkan untuk laporan audit. Ini adalah alat pamungkas untuk memverifikasi nama dan deskripsi yang aksesibel secara akurat.

2. Elements List (Daftar Elemen)

Alat: - NVDA: Elements List (Insert + F7) - JAWS: Window List / Berbagai macam daftar (Insert + F3 memunculkan menu daftar virtual)

Aplikasi untuk Auditor: Elements List adalah "penglihatan tembus pandang" (x-ray) bagi auditor untuk melihat struktur halaman. Fitur ini mengumpulkan semua heading, landmark, tautan, tombol, dan bidang formulir ke dalam satu kotak dialog.

Saat menginterogasi halaman, Elements List memungkinkan Anda untuk:

• Mengaudit Hierarki Heading: Menemukan lompatan level heading dengan cepat (misalnya, H1 langsung diikuti oleh H3).
• Mengevaluasi Tujuan Tautan (Links): Memindai daftar tautan untuk menemukan teks tautan yang ambigu seperti "Klik Di Sini" atau "Baca Selengkapnya" yang tidak memiliki konteks.
• Memeriksa Area Landmark: Memastikan halaman dibagi dengan benar menjadi area yang bermakna (header, main, footer) tanpa ada konten yang terabaikan (orphan content).

3. Navigasi Objek (Object Navigation) dan Touch Cursor

Alat: - NVDA: Object Navigation (Tombol Numpad untuk bergerak berdasarkan objek, bukan kursor virtual) - JAWS: Touch Cursor (Shift + Numpad Plus)

Aplikasi untuk Auditor: Terkadang, kursor virtual standar (yang membaca DOM secara linier) menyembunyikan struktur sebenarnya dari sebuah aplikasi, terutama dalam aplikasi web kompleks atau perangkat lunak desktop. Navigasi Objek memungkinkan auditor untuk keluar dari mode membaca linier dan mengeksplorasi pohon objek hierarkis dari aplikasi tersebut (Parent, Child, Next Sibling, Previous Sibling). Ini sangat penting ketika mengaudit widget kustom di mana tata letak visual tidak sesuai dengan urutan DOM, atau ketika mencoba menentukan dengan pasti mengapa suatu elemen tertentu diabaikan oleh kursor virtual.

---

Screen Reader Mobile: Membedah Aplikasi Native

Mengaudit aplikasi mobile membutuhkan pendekatan taktil yang berbeda. Screen reader pada mobile bergantung pada gestur usapan daripada perintah keyboard, dan memahami cara memanipulasi gestur ini secara analitis adalah kunci untuk menginterogasi antarmuka iOS dan Android secara native.

Usapan (Swipes) vs. Jelajah dengan Sentuhan (Explore by Touch)

Saat menguji aplikasi seluler secara native, Anda memiliki dua metode navigasi utama: 1. Explore by Touch (Jelajah dengan Sentuhan): Menyeret satu jari melintasi layar. Screen reader mengumumkan apa pun yang berada di bawah jari. 2. Linear Swiping (Usapan Linier): Mengusap ke kiri atau kanan dengan satu jari untuk berpindah ke elemen yang dapat difokuskan sebelumnya atau berikutnya.

Aplikasi untuk Auditor: Kesalahan auditor yang paling umum adalah hanya mengandalkan "Explore by Touch". Meskipun berguna untuk orientasi spasial awal, Anda harus menggunakan usapan linier (kiri/kanan) untuk menguji Urutan Fokus (Focus Order). Usapan linier memaksa screen reader untuk mengikuti urutan fokus terprogram yang ditentukan oleh pengembang. Jika Anda mengusap ke kanan dan fokus melompat secara tidak beraturan di sekitar layar, Anda telah mengidentifikasi pelanggaran kriteria WCAG 2.4.3 (Focus Order) yang kritis.

iOS VoiceOver: Menguasai Rotor

Alat: Rotor diaktifkan dengan memutar dua jari di layar seperti memutar kenop radio.

Aplikasi untuk Auditor: Rotor adalah alat analitis paling kuat di iOS. Alat ini mengubah cara VoiceOver menafsirkan gestur usapan atas/bawah standar. Bagi seorang auditor, Rotor digunakan untuk:

• Navigasi berdasarkan Heading/Landmark: Mengisolasi dan menguji kerangka struktural aplikasi.
• Navigasi berdasarkan Kontrol Formulir: Melompat di antara bidang teks dan sakelar (switches) untuk memastikan mereka diberi label dan dikelompokkan dengan benar.
• Navigasi berdasarkan Karakter/Kata: Jika label salah diucapkan atau tampak keliru, ubah Rotor menjadi "Characters" (Karakter) dan usap ke bawah untuk mengeja label aksesibilitas huruf demi huruf. Hal ini dapat mengekspos karakter unicode yang tidak terlihat, akronim yang tidak pantas, atau spasi yang hilang di dalam label dasarnya.
• Memeriksa Grafik Audio (Audio Graphs): Menganalisis bagan data kompleks yang disajikan kepada pengguna VoiceOver.

Android TalkBack: Kontrol Membaca dan Menu TalkBack

Alat: - Kontrol Membaca (Reading Controls): Mengusap ke atas/bawah dengan tiga jari (atau atas/bawah dengan satu jari tergantung pada versi/pengaturan TalkBack) mengubah rincian pembacaan. - Menu TalkBack: Menu multi-bagian yang diakses dengan mengetuk layar menggunakan tiga jari (atau usapan ke bawah lalu ke kanan).

Aplikasi untuk Auditor: Mirip dengan VoiceOver Rotor, Kontrol Membaca TalkBack memungkinkan auditor untuk membedah string teks berdasarkan karakter, kata, atau paragraf.

Menu TalkBack menyediakan fitur analitis tingkat lanjut:

• Describe Image (Deskripsikan Gambar): Berguna untuk memeriksa apakah deskripsi otomatis TalkBack bertentangan dengan alt text yang hilang.
• Screen Search (Pencarian Layar): Memungkinkan auditor untuk menemukan elemen spesifik pada layar yang penuh sesak dan memverifikasi apakah elemen tersebut diekspos secara terprogram.
• Tindakan Kustom (Custom Actions): Saat mengaudit elemen interaktif kustom (seperti item daftar yang dapat digeser), memeriksa menu TalkBack untuk "Actions" dapat memverifikasi apakah pengembang telah mengimplementasikan tindakan AccessibilityNodeInfo dengan benar, yang memungkinkan pengguna screen reader melakukan gestur yang jika tidak akan membutuhkan proses penyeretan visual yang rumit.

---

Teknik Audit Praktis: Menggabungkan Semuanya

Untuk merampungkan pelatihan navigasi analitis Anda, mari kita lihat bagaimana menggabungkan alat-alat ini dalam skenario audit praktis.

Skenario 1: Jebakan Elemen Tersembunyi

Masalah: Elemen yang tersembunyi secara visual (seperti tautan lewati (skip links) yang secara visual berada di luar layar atau modal dialog yang disembunyikan) mungkin masih dapat dibaca oleh screen reader. Interogasi: 1. Gunakan navigasi linier standar (Tombol Tab pada desktop, usap ke kanan pada mobile). 2. Jika screen reader fokus pada elemen yang secara visual tersembunyi, tetapi tidak tersembunyi secara terprogram (`aria-hidden="true"` atau `display: none`), Anda telah menemukan pelanggaran. 3. Gunakan Elements List pada desktop untuk melihat apakah konten latar belakang yang seharusnya tersembunyi masih muncul di accessibility tree saat modal dialog sedang terbuka.

Skenario 2: Memverifikasi Name, Role, Value

Masalah: Sebuah kotak centang (checkbox) buatan khusus (custom) secara visual terlihat seperti kotak centang, tetapi dikodekan sebagai `