Memindahkan Fokus ke Kesalahan Pertama

Pengguna mengirim formulir, halaman menampilkan kesalahan di bagian atas, tetapi fokus tetap berada pada tombol. Mereka tidak tahu bahwa ada sesuatu yang gagal. 😕

Saat pengiriman gagal, pindahkan fokus ke bidang invalid pertama. Pengguna langsung berada di tempat perbaikan dimulai, tanpa perlu mencarinya.

Temukan kontrol pertama yang gagal dan panggil focus() padanya. Kini pengguna keyboard dan pembaca layar sama-sama mulai dari tempat yang tepat.

Saat fokus berada di sana, pembaca layar mengumumkan nama bidang, bahwa bidang tersebut invalid, serta kesalahan yang dideskripsikan, semuanya sekaligus.

Selalu targetkan first error dalam urutan dokumen. Melompat ke bidang yang lebih akhir akan melewati masalah yang masih harus ditangani pengguna.

Menggulir hingga kesalahan terlihat membantu pengguna tetikus, tetapi pengguna keyboard dan pembaca layar memerlukan fokus yang benar-benar dipindahkan, bukan sekadar pergeseran piksel.

Jika ada banyak kesalahan, arahkan fokus terlebih dahulu ke ringkasan kesalahan di bagian atas. Cantumkan setiap masalah sebagai tautan yang melompat ke bidangnya.

Heading atau div tidak dapat menerima fokus secara bawaan. Tambahkan tabindex="-1" agar skrip Anda dapat memindahkan fokus ke sana secara terprogram.

Di dalam ringkasan, setiap item merupakan tautan ke id bidang tersebut. Saat diaktifkan, tautan itu langsung memindahkan fokus ke input yang bermasalah.

Pindahkan fokus hanya sebagai tanggapan atas tindakan submit pengguna, jangan pada setiap penekanan tombol. Menarik fokus saat pengguna sedang mengetik terasa mengganggu dan tidak diinginkan.

Setelah pengguna memperbaiki semuanya dan mengirim ulang, pindahkan fokus ke pesan keberhasilan agar mereka mendengar bahwa proses akhirnya berhasil.

Saat terjadi kegagalan, pindahkan fokus ke bidang invalid pertama atau ringkasan kesalahan yang dapat menerima fokus, lalu pindahkan ke pesan keberhasilan setelah proses berhasil. ✅