Perintah dan cakupan
Pertanyaan frontend ini menguji model keyboard dan aksesibilitas dari interaksi yang kompleks. Jangan hanya memasang beberapa handler keydown; tentukan state machine yang lengkap untuk membuka, mencari, memilih, mengeksekusi, menutup, dan memulihkan fokus, serta ekspos role, name, dan state yang tepat ke pembaca layar.
Hal yang dievaluasi oleh pewawancara
- Apakah Anda membedakan semantik dialog, combobox, listbox, dan menu.
- Apakah Tab, panah, Enter, Escape, Home, dan End memiliki perilaku yang konsisten.
- Apakah visibilitas fokus, pemulihan, hasil dinamis, pemuatan, dan kesalahan ditangani dengan baik.
- Apakah pintasan global menghindari pembajakan input, teknologi asistif, atau perilaku default browser.
Pertanyaan klarifikasi untuk diajukan terlebih dahulu
Konfirmasikan apakah perintah dikelompokkan, baru saja digunakan, atau dicari secara asinkron, apakah perangkat seluler memiliki titik masuk lain, apakah pintasan dapat dikonfigurasi, dan apakah eksekusi melakukan navigasi, membuka dialog, atau mengubah status halaman. Klarifikasi juga dukungan mouse dan sentuhan, batasan hasil, serta penundaan pemuatan yang dapat diterima.
Struktur jawaban 30 detik
Gunakan modal dialog bernama di sekitar input dan hasil dengan hubungan combobox/listbox yang eksplisit. Simpan pemicu dan fokuskan input saat dibuka; panah memindahkan item aktif, Enter mengeksekusi, dan Escape menutup serta memulihkan fokus. Umumkan perubahan status hasil, picu pintasan hanya dalam konteks yang aman, dan uji setiap transisi dengan keyboard, pembaca layar, dan otomatisasi.
Jawaban mendalam
1. Pilih batasan semantik
Gunakan dialog bernama di bagian luar, semantik combobox untuk input saat interaksi memerlukannya, listbox untuk hasil, dan option untuk pilihan. Untuk perintah hierarkis, ikuti pola menu daripada menambahkan role="menuitem" di mana-mana. ARIA harus menggambarkan perilaku nyata, bukan menutupi struktur DOM yang salah.
2. Rancang state machine untuk fokus dan keyboard
Catat pemicu dan fokuskan input saat dibuka. Tombol panah berpindah melalui hasil, Home dan End melompat ke batas, Enter mengeksekusi item saat ini, dan Escape menutup. Perilaku Tab harus cocok dengan pola yang dipilih dan tidak boleh membiarkan fokus berpindah ke belakang dialog. Saat menutup, gagal, atau navigasi, pulihkan fokus ke pemicu atau target yang sesuai.
3. Tangani hasil dinamis dan pengumuman
Pertahankan fokus input saat pencarian asinkron memperbarui hasil, perbarui aria-activedescendant atau fokus nyata, dan ekspos status pemuatan, kosong, kesalahan, dan jumlah hasil. Jangan membaca seluruh daftar pada setiap karakter; gunakan status region yang ringkas dan buat nama yang dipilih, pintasan, serta status dinonaktifkan dapat dirasakan.
4. Kontrol pintasan dan perilaku default
Periksa fokus saat ini, kombinasi modifier, dan platform sebelum membuka. Hindari membajak pintasan dari input, editor, atau mode pembaca layar. Panggil preventDefault hanya jika mengganti perilaku browser memang disengaja; pertahankan operasi salin, tempel, temukan, dan bantuan asistif. Sediakan tombol yang terlihat agar pintasan tidak pernah menjadi satu-satunya titik masuk.
5. Buat eksekusi, kegagalan, dan pengujian dapat diobservasi
Tampilkan perintah yang dipilih sebelum eksekusi, ekspos kemajuan atau cegah pengiriman duplikat untuk pekerjaan asinkron, dan pertahankan konteks dengan jalur coba lagi saat gagal. Uji jalur khusus keyboard, fokus yang terlihat, jebakan fokus, pemulihan Escape, hasil dinamis, zoom, jaringan lambat, dan setidaknya satu pembaca layar. Catat log pembukaan, pencarian, kegagalan, dan pembatalan tanpa merekam input sensitif.
Contoh jawaban yang kuat
Saya akan membungkus input dan hasil dalam dialog bernama. Saat dibuka, simpan pemicu dan fokuskan input; hubungkan input dan listbox dengan aria-controls dan aria-activedescendant sehingga opsi aktif menjadi jelas. Panah dan Home/End memindahkan pilihan, Enter mengeksekusi, Escape menutup dan memulihkan fokus, dan Tab tidak pernah mencapai latar belakang. Pencarian asinkron mengumumkan status pemuatan, kosong, dan kesalahan secara ringkas. Pintasan memeriksa fokus dan platform, mempertahankan default browser, dan memiliki alternatif tombol yang terlihat. Pengujian mencakup keyboard, pembaca layar, zoom, jaringan lambat, coba lagi, dan fokus yang terlihat, serta telemetri mengecualikan kueri sensitif.
Kesalahan umum
- Menangani keydown tanpa mendefinisikan status buka, tutup, dan pemulihan fokus.
- Menambahkan role menu, menuitem, atau combobox ke kontainer arbitrer.
- Kehilangan fokus setelah pembaruan dinamis sehingga pembaca layar tidak dapat mengidentifikasi opsi aktif.
- Mencegat pintasan global dan merusak input, salin/tempel, atau perilaku asistif.
- Tidak menawarkan titik masuk yang terlihat dan mengharuskan pengguna menghafal pintasan.
- Hanya menguji klik mouse dan otomatisasi alih-alih keyboard, zoom, pembaca layar, dan jaringan lambat.
Pertanyaan lanjutan
Haruskah Anda memindahkan fokus nyata atau menggunakan aria-activedescendant?
Keduanya dapat berfungsi tergantung pada struktur dan dukungan pembaca layar. Fokus nyata bersifat langsung tetapi memerlukan pengelolaan interaksi input dan opsi; aria-activedescendant mempertahankan fokus input dan memerlukan referensi yang stabil, opsi yang dapat dirasakan, dan pengujian pada perangkat nyata.
Bagaimana cara menghindari jebakan fokus saat tidak ada hasil?
Pertahankan fokus pada input, tampilkan status kosong yang eksplisit, dan izinkan Escape, pengeditan kueri, serta tombol yang terlihat. Jangan pernah memindahkan fokus ke placeholder yang tidak interaktif.
Ke mana fokus pergi setelah navigasi?
Tujuan harus memilih target yang sesuai seperti heading atau konten utamanya. Jika pengguna tetap berada di halaman tersebut, pulihkan pemicu atau konteks. Jika gagal, biarkan palet tetap terbuka beserta kueri dan kesalahannya.
Bagaimana cara memverifikasi bahwa pintasan tidak berkonflik dengan browser?
Buat daftar platform dan kombinasi yang didukung serta uji di dalam input, editor, formulir, dan lingkungan pembaca layar. Cegah default hanya jika sengaja menggantinya, dan sediakan pengaturan atau alternatif tombol.