Cara Mencegah Kontrol Keyboard Merusak Geseran Puzzle Berbasis Mouse

Ketika puzzle bereaksi terhadap tombol panah selama operasi mouse, penyebabnya sering kali adalah listener keyboard yang cakupannya terlalu luas. Handler yang dipasang pada document atau window dapat menerima penekanan tombol panah bahkan saat pemain sedang mengetik di bidang petunjuk, menggunakan menu, atau berinteraksi dengan kontrol lain. Hal ini juga dapat memicu perilaku bawaan browser, seperti scrolling, bersamaan dengan perubahan pada puzzle.

Reproduksi masalah tersebut dengan daftar periksa singkat: klik ubin dan seret; seret melintasi batas puzzle; tekan tombol panah saat puzzle memiliki fokus; lalu tekan tombol panah saat input petunjuk, tombol, atau menu memiliki fokus. Perhatikan apakah papan berubah, halaman bergulir, fokus berpindah, atau seretan berhenti. Pengamatan ini membedakan masalah handler puzzle dari pelacakan penunjuk atau perilaku default browser.

Perlakukan papan sebagai kontrol dengan titik masuk keyboard yang jelas. Gunakan wadah papan yang dapat menerima fokus (focusable) dan tangani tombol puzzle hanya ketika papan tersebut aktif, atau saat fokus berada pada ubin milik papan tersebut. Jaga agar kontrol yang tidak terkait, seperti tombol petunjuk dan bidang teks, berada di luar batas penanganan tombol tersebut. Buat lokasi fokus terlihat agar pemain tahu kapan papan akan merespons.

Periksa target event sebelum menginterpretasikan tombol. Jika fokus berada di dalam input, area teks, elemen yang dapat diedit, atau tombol terpisah, biarkan tombol tersebut. Untuk alat petualangan kooperatif, hal ini penting saat seorang pemain memasukkan rune, nama, atau petunjuk sementara orang lain memanipulasi puzzle: pengetikan tidak boleh menjadi gerakan ubin yang tidak disengaja.

Operasi keyboard tetap harus berfungsi. Panduan W3C menjelaskan bahwa fungsionalitas harus tersedia melalui antarmuka keyboard jika memungkinkan, dan mengidentifikasi pemindahan objek ke suatu lokasi sebagai tindakan yang dapat dioperasikan dengan keyboard. Batasi cakupan tombol dengan cermat alih-alih menghapusnya sama sekali. W3C: Understanding Success Criterion 2.1.1: Keyboard

Pilihlah sekumpulan tombol kecil yang terdokumentasi untuk papan, seperti tombol panah saat papan difokuskan. Di dalam handler, pertama-tama pastikan bahwa tombol tersebut adalah tombol yang digunakan puzzle dan papan adalah target aktif. Baru setelah itu terapkan gerakan dan, jika perlu, batalkan tindakan default browser untuk tombol tersebut. Hindari menekan (suppress) setiap tombol secara global: pemain mungkin memerlukan pengetikan normal, navigasi browser, dan kontrol di luar puzzle.

preventDefault() membatalkan tindakan default browser saat event tersebut dapat dibatalkan (cancelable), tetapi tidak menghentikan event tersebut menyebar ke handler lain. Itu berarti metode ini dapat mencegah scrolling halaman tanpa memperbaiki listener kedua yang juga memindahkan ubin. Temukan dan persempit handler yang mengubah status game; jangan gunakan pembatalan luas sebagai pengganti kepemilikan event yang jelas. MDN: Event: preventDefault() method

Untuk interaksi seret, lacak satu penunjuk aktif mulai dari penekanan yang memulai seretan hingga pelepasan atau pembatalannya. Pointer event menyediakan pointerdown, pointermove, pointerup, dan pointercancel; penangkapan penunjuk (pointer capture) dapat menjaga pointer event berikutnya tetap diarahkan ke papan bahkan saat penunjuk bergerak ke luar area klik awalnya. Bersihkan seretan aktif pada pointerup maupun pointercancel, sehingga gestur yang terinterupsi tidak meninggalkan puzzle dalam status macet menyeret. MDN: Pointer events

Hindari membangun ulang atau mengganti ubin yang diseret dengan cara yang menghilangkan pelacakan penunjuknya. Jika antarmuka memindahkan elemen di DOM selama penyeretan, MDN mencatat bahwa pointer capture harus diatur setelah pemindahan tersebut. Tentukan apa yang terjadi ketika penunjuk dilepas di atas posisi yang tidak valid: untuk puzzle geser, mengembalikan ubin ke posisi sebelumnya atau memasangnya ke posisi yang sah lebih mudah dipahami daripada mengubah ubin lain yang tidak terkait secara diam-diam.

Puzzle dapat mendukung input mouse, keyboard, dan penunjuk sederhana secara bersamaan. Misalnya, mengeklik atau mengetuk ubin di samping ruang kosong dapat memindahkannya; menyeret ubin tersebut dapat tetap menjadi gestur manipulasi langsung opsional; dan tombol panah saat papan fokus dapat menyediakan operasi keyboard. Semua input ini harus memanggil logika validasi gerakan yang sama, sehingga gerakan dinyatakan sah atau ditolak secara konsisten terlepas dari bagaimana gerakan itu diminta.

Hal ini juga memberikan pemeriksaan desain yang berguna: dapatkah pemain menyelesaikan puzzle dengan klik atau ketukan tanpa menyeret? Panduan WCAG 2.2 dari W3C memperlakukan akses keyboard dan alternatif penunjuk tunggal untuk menyeret sebagai hal yang terpisah. Contohnya mencakup penggantian seretan dengan klik pada kontrol arah. Alternatif khusus keyboard itu sendiri tidak menyediakan alternatif penunjuk tersebut. W3C: Understanding Success Criterion 2.5.7: Dragging Movements

Untuk puzzle geser, mengeklik ubin tetangga satu per satu sering kali merupakan alternatif yang alami karena tetap mempertahankan aturan gerakan berdekatan pada puzzle. Jika interaksi tersebut dirasa kurang jelas, tombol gerakan yang terlihat dapat menjelaskan arah yang tersedia. Teknik G219 dari W3C memberikan contoh kontrol penunjuk tunggal yang melakukan tindakan dasar yang sama tanpa perlu menyeret. W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content

Sebelum menggunakan puzzle di meja permainan, jalankan setiap jalur input dengan tata letak papan dan status awal yang sama. Pastikan bahwa langkah yang valid memperbarui papan satu kali, langkah yang tidak valid membiarkannya tidak berubah, dan kontrol yang tidak terkait tetap mempertahankan perilaku normalnya.

• Mouse: seret ubin yang sah, lepaskan di luar papan, dan cobalah langkah yang tidak sah. Pastikan papan tidak kehilangan seretan maupun berubah secara tak terduga.

• Keyboard: fokuskan papan, gunakan setiap arah yang didukung, lalu pindahkan fokus ke bidang teks dan ketik. Pastikan hanya tombol yang difokuskan ke papan yang menggerakkan ubin dan pengetikan tidak menggulir atau mengubah papan.

• Penunjuk tanpa menyeret: klik atau ketuk ubin tetangga yang sah. Pastikan tindakan ini menghasilkan gerakan yang sama seperti metode input lainnya.

• Interupsi: batalkan atau tinggalkan seretan, lalu mulai yang lain. Pastikan tidak ada seleksi usang yang tersisa.

Jika suatu pengujian gagal, periksa lapisan terkait yang paling sempit terlebih dahulu: target event dan status fokus untuk perilaku keyboard; pointer capture dan pembersihan untuk seretan yang terinterupsi; serta validator gerakan bersama untuk aturan yang tidak konsisten. Urutan ini memberi pembuat cara konkret untuk menemukan masalah tanpa mengubah alat peraga petualangan ini menjadi tutorial kontrol serbaguna.

• Pointer events — MDN

• Event: preventDefault() method — MDN

• Understanding Success Criterion 2.1.1: Keyboard — W3C WAI

• Understanding Success Criterion 2.5.7: Dragging Movements — W3C WAI

• G219: Ensuring that an alternative is available for dragging movements that operate on content — W3C WAI