Maklum balas dan skop
Soalan frontend ini menguji model papan kekunci dan kebolehcapaian interaksi yang kompleks. Jangan hanya memasang beberapa pengendali keydown; tentukan mesin keadaan buka, cari, pilih, laksana, tutup, dan pulihkan fokus yang lengkap serta dedahkan role, name, dan state yang betul kepada pembaca skrin.
Perkara yang dinilai oleh penemu duga
- Sama ada anda membezakan semantik dialog, combobox, listbox, dan menu.
- Sama ada Tab, anak panah, Enter, Escape, Home, dan End mempunyai tingkah laku yang konsisten.
- Sama ada keterlihatan fokus, pemulihan, hasil dinamik, pemuatan, dan ralat dikendalikan.
- Sama ada pintasan global mengelak daripada mengambil alih input, teknologi bantuan, atau tetapan lalai pelayar.
Soalan penjelasan untuk ditanya terlebih dahulu
Sahkan sama ada arahan dikumpulkan, terkini, atau dicari secara tak segerak, sama ada mudah alih mempunyai titik masuk lain, sama ada pintasan boleh dikonfigurasikan, dan sama ada pelaksanaan menavigasi, membuka dialog, atau mengubah keadaan halaman. Jelaskan juga sokongan tetikus dan sentuhan, had hasil, dan kelewatan pemuatan yang boleh diterima.
Struktur jawapan 30 saat
Gunakan dialog modal bernama di sekeliling input dan hasil dengan hubungan combobox/listbox yang eksplisit. Simpan pencetus dan fokuskan input semasa dibuka; anak panah menggerakkan item aktif, Enter melaksanakan, dan Escape menutup serta memulihkan fokus. Umumkan perubahan keadaan hasil, cetuskan pintasan hanya dalam konteks yang selamat, dan uji setiap peralihan dengan papan kekunci, pembaca skrin, dan automasi.
Jawapan mendalam
1. Pilih sempadan semantik
Gunakan dialog bernama di luar, semantik combobox untuk input apabila interaksi memerlukannya, listbox untuk hasil, dan option untuk pilihan. Untuk arahan berhierarki, ikuti corak menu daripada menambah role="menuitem" di merata tempat. ARIA harus menerangkan tingkah laku sebenar, bukan menutup struktur DOM yang salah.
2. Reka bentuk mesin keadaan fokus dan papan kekunci
Rakam pencetus dan fokuskan input semasa dibuka. Kekunci anak panah bergerak melalui hasil, Home dan End melompat ke sempadan, Enter melaksanakan item semasa, dan Escape menutup. Tingkah laku Tab mesti sepadan dengan corak yang dipilih dan tidak sekali-kali membiarkan fokus jatuh ke belakang dialog. Semasa tutup, kegagalan, atau navigasi, pulihkan fokus kepada pencetus atau sasaran yang munasabah.
3. Kendalikan hasil dinamik dan pengumuman
Kekalkan fokus input semasa carian tak segerak mengemas kini hasil, kemas kini aria-activedescendant atau fokus sebenar, dan dedahkan keadaan pemuatan, kosong, ralat, dan kiraan hasil. Jangan baca keseluruhan senarai pada setiap aksara; gunakan status region yang ringkas dan jadikan nama, pintasan, dan keadaan dinyahdayakan yang dipilih dapat dilihat/difahami.
4. Kawal pintasan dan tingkah laku lalai
Semak fokus semasa, gabungan pengubah suai (modifier), dan platform sebelum membuka. Elakkan daripada mengambil alih pintasan daripada input, editor, atau mod pembaca skrin. Panggil preventDefault hanya apabila menggantikan tingkah laku pelayar adalah disengajakan; kekalkan operasi salin, tampal, cari, dan bantuan. Sediakan butang yang boleh dilihat supaya pintasan tidak pernah menjadi satu-satunya cara masuk.
5. Jadikan pelaksanaan, kegagalan, dan ujian boleh diperhatikan
Tunjukkan arahan yang dipilih sebelum pelaksanaan, dedahkan kemajuan atau halang penghantaran pendua untuk kerja tak segerak, dan kekalkan konteks dengan laluan cuba semula semasa kegagalan. Uji laluan papan kekunci sahaja, fokus yang boleh dilihat, perangkap fokus, pemulihan Escape, hasil dinamik, zum, rangkaian perlahan, dan sekurang-kurangnya satu pembaca skrin. Log pembukaan, carian, kegagalan, dan pembatalan tanpa merakam input sensitif.
Contoh jawapan yang kukuh
Saya akan membalut input dan hasil dalam dialog yang dinamakan. Semasa dibuka, simpan pencetus dan fokuskan input; sambungkan input dan listbox dengan aria-controls dan aria-activedescendant supaya pilihan aktif jelas. Anak panah dan Home/End mengalihkan pilihan, Enter melaksanakan, Escape menutup dan memulihkan fokus, dan Tab tidak pernah sampai ke latar belakang. Carian tak segerak mengumumkan keadaan pemuatan, kosong, dan ralat secara ringkas. Pintasan menyemak fokus dan platform, mengekalkan tetapan lalai pelayar, dan mempunyai alternatif butang yang boleh dilihat. Ujian meliputi papan kekunci, pembaca skrin, zum, rangkaian perlahan, cuba semula, dan fokus yang boleh dilihat, dan telemetri mengecualikan pertanyaan sensitif.
Kesilapan biasa
- Mengendalikan keydown tanpa mentakrifkan keadaan buka, tutup, dan pemulihan fokus.
- Menambah peranan menu, menuitem, atau combobox pada bekas sewenang-wenangnya.
- Kehilangan fokus selepas kemas kini dinamik sehingga pembaca skrin tidak dapat mengenal pasti pilihan aktif.
- Memintas pintasan global dan merosakkan input, salin/tampal, atau tingkah laku bantuan.
- Tidak menawarkan titik masuk yang boleh dilihat dan memerlukan pengguna menghafal pintasan.
- Menguji hanya klik tetikus dan automasi dan bukannya papan kekunci, zum, pembaca skrin, dan rangkaian perlahan.
Soalan susulan
Patutkah anda mengalihkan fokus sebenar atau menggunakan aria-activedescendant?
Kedua-duanya boleh berfungsi bergantung pada struktur dan sokongan pembaca skrin. Fokus sebenar adalah secara langsung tetapi memerlukan pengurusan interaksi input dan pilihan; aria-activedescendant mengekalkan fokus input dan memerlukan rujukan yang stabil, pilihan yang boleh dilihat/difahami, dan ujian peranti sebenar.
Bagaimanakah anda mengelakkan perangkap fokus apabila tiada hasil?
Kekalkan fokus dalam input, tunjukkan keadaan kosong yang jelas, dan benarkan Escape, pengeditan pertanyaan, dan butang yang boleh dilihat. Jangan sekali-kali mengalihkan fokus kepada ruang letak (placeholder) yang tidak interaktif.
Ke manakah fokus pergi selepas navigasi?
Destinasi harus memilih sasaran yang munasabah seperti tajuk (heading) atau kandungan utamanya. Jika pengguna kekal pada halaman tersebut, pulihkan pencetus atau konteks. Sekiranya berlaku kegagalan, pastikan palet sentiasa terbuka dengan pertanyaan dan ralat.
Bagaimanakah anda mengesahkan pintasan tidak bercanggah dengan pelayar?
Senaraikan platform dan gabungan yang disokong dan uji dalam input, editor, borang, dan persekitaran pembaca skrin. Halang lalai hanya apabila menggantikannya secara sengaja, dan sediakan tetapan atau alternatif butang.