Aksesibilitas untuk Widget Pelengkapan Otomatis

Pola kotak kombo WAI-ARIA menetapkan seperangkat peran dan properti khusus untuk widget pelengkapan otomatis. Kotak kombo adalah elemen masukan yang dipasangkan dengan daftar pilihan sembul. Pola ini memastikan pembaca layar mengumumkan perilaku interaktif, opsi yang tersedia, dan pilihan saat ini dengan benar kepada pengguna yang tidak dapat melihat antarmuka visual.

Bungkus masukan dalam div dengan role="combobox". Dengan begitu, teknologi bantu mengetahui bahwa masukan tersebut memiliki daftar sembul terkait. Tetapkan aria-expanded={isOpen} pada pembungkus ini untuk memberi tahu pembaca layar apakah daftar saran sedang terlihat atau tersembunyi.

Elemen masukan itu sendiri harus memiliki: aria-autocomplete="list" (sembul berisi daftar saran), aria-haspopup="listbox" (mengeklik atau mengetik akan membuka kotak daftar), aria-expanded={isOpen}, dan aria-controls="suggestion-list-id" yang menunjuk ke id elemen daftar tarik-turun.

aria-activedescendant pada masukan menunjuk ke id opsi yang sedang disorot. Saat selectedIndex bernilai 0, tetapkan aria-activedescendant="option-0". Pembaca layar menggunakan atribut ini untuk mengumumkan item yang aktif tanpa memindahkan fokus sebenarnya dari masukan. Saat tidak ada item yang dipilih, hapus atribut tersebut atau tetapkan sebagai string kosong.

Elemen wadah menu tarik-turun harus memiliki role="listbox" dan id unik yang cocok dengan aria-controls pada masukan. Peran ini memberi tahu pohon aksesibilitas bahwa elemen tersebut merupakan daftar opsi yang dapat dipilih. Kotak daftar menerima fokus secara tidak langsung melalui aria-activedescendant pada masukan.

Setiap item saran harus memiliki role="option" dan id unik seperti option-0, option-1, dan seterusnya. Tambahkan aria-selected={index === selectedIndex} untuk menunjukkan item yang sedang disorot. Pembaca layar mengumumkan isi opsi sekaligus apakah opsi tersebut dipilih saat pengguna bernavigasi dengan tombol panah.

Saat pengguna menekan ArrowDown dan aria-activedescendant diperbarui menjadi option-1, VoiceOver mengumumkan sesuatu seperti "hook React, 2 dari 5". Pembaca layar membaca teks opsi dan posisinya dalam daftar secara otomatis dari markup ARIA. Wilayah langsung tambahan tidak diperlukan untuk navigasi dengan papan ketik.

Uji dengan VoiceOver di macOS (Cmd+F5 untuk mengaktifkan atau menonaktifkan) dan NVDA di Windows (unduhan gratis). Buka masukan lalu mulai mengetik. Pastikan pembaca layar mengumumkan peran kotak kombo, jumlah hasil yang ditemukan, dan setiap opsi saat Anda menelusurinya dengan tombol panah. Bandingkan perilakunya dengan contoh dalam Panduan Praktik Penulisan WAI-ARIA.

Saat saran dimuat secara asinkron, tambahkan div yang tersembunyi secara visual dengan aria-live="polite" dan aria-atomic="true". Perbarui isi teksnya saat pemuatan selesai: "5 hasil ditemukan" atau "Tidak ada hasil ditemukan". Pembaca layar mengumumkan pesan ini setelah ucapan saat ini selesai, sehingga pengguna tetap mendapatkan informasi tanpa terganggu.

Panduan Praktik Penulisan WAI-ARIA (APG) di w3.org/WAI/ARIA/apg berisi halaman khusus tentang pola kotak kombo dengan contoh kode yang berfungsi dan spesifikasi interaksi papan ketik yang terperinci. Selalu rujuk APG saat menerapkan widget interaktif seperti pelengkapan otomatis, dialog, atau tab untuk memastikan kepatuhan aksesibilitas yang menyeluruh.

Berikan aria-label pada masukan jika tidak ada elemen label yang terlihat: aria-label="Search suggestions". Jangan hanya mengandalkan placeholder sebagai label—placeholder menghilang saat pengguna mengetik dan tidak selalu diumumkan oleh semua pembaca layar. Elemen label yang terlihat dengan htmlFor selalu merupakan pilihan terbaik.

Apa tujuan atribut aria-activedescendant pada masukan pelengkapan otomatis?

Gunakan role="combobox" pada pembungkus, aria-autocomplete="list" pada masukan, serta aria-expanded, aria-controls, dan aria-activedescendant untuk menghubungkan masukan dengan daftar saran. Setiap opsi memerlukan role="option", id unik, dan aria-selected. Tambahkan wilayah aria-live untuk jumlah hasil asinkron.