Memindahkan Fokus Setelah Tindakan

Bagi pengguna keyboard dan pembaca layar, focus menunjukkan posisi mereka di halaman. Setelah suatu tindakan, Anda menentukan di mana posisi tersebut berada berikutnya.

Ketika tombol menampilkan konten baru, focus sering tetap di tempatnya sehingga pengguna tidak pernah mengetahui bahwa sesuatu telah berubah. Memindahkan focus membawa mereka ke hasilnya.

Anda memindahkan focus dalam JavaScript dengan memanggil element.focus() pada target tempat pengguna ingin diarahkan berikutnya.

div biasa tidak dapat menerima focus, jadi berikan tabindex="-1" pada tujuan agar skrip Anda dapat memindahkan focus ke sana.

Setelah memuat konten baru, tampilkan konten tersebut lalu arahkan focus ke sana agar pembaca layar mulai membacakan region baru. 🔎

Mengarahkan focus ke judul bagian baru sering kali menghasilkan pembacaan terbaik karena memberi pengguna judul yang jelas untuk lokasi yang baru mereka datangi.

Ketika pengguna menghapus sebuah baris, focus akan hilang jika tidak ditangani. Pindahkan focus ke item berikutnya atau kontrol di dekatnya agar mereka dapat melanjutkan.

Membiarkan focus kembali ke bagian atas halaman setelah setiap tindakan terasa mengganggu. Arahkan focus ke lokasi yang relevan agar konteks tetap terjaga.

Pindahkan focus hanya sebagai tanggapan terhadap tindakan pengguna. Merebutnya saat pembaruan latar belakang akan mengeluarkan pengguna dari aktivitas yang sedang mereka lakukan.

Uji dengan memicu tindakan menggunakan keyboard dan amati cincin focus berpindah ke tempat yang Anda maksud setiap kali.

Setiap tindakan penting seharusnya menghasilkan tepat satu perpindahan focus yang disengaja. Perilaku yang dapat diprediksi selalu lebih baik daripada yang terlalu cerdik.

Anda telah mempelajari cara memindahkan focus dengan sengaja: buat target dapat menerima focus dengan tabindex="-1", panggil focus() setelah tindakan, dan arahkan ke tempat yang paling berguna. ✨