Tangan mengetik di laptop dengan cincin fokus yang terlihat jelas pada tombol di layar

Cara Menata Fokus Keyboard agar Navigasi Halaman Mudah Diikuti

Anda menekan Tab untuk pindah dari kolom pencarian ke tombol kirim, tetapi tidak ada tanda apa pun di layar. Kursor fokus sebenarnya sudah berpindah, hanya saja tidak terlihat. Pengguna keyboard, pembaca layar, dan siapa pun yang memakai tombol Tab akan kebingungan menentukan posisi mereka. Cara menata fokus keyboard pada antarmuka menentukan apakah navigasi tanpa mouse bisa diikuti atau justru menimbulkan tebakan.

Mengapa indikator fokus sering hilang

Banyak stylesheet reset modern menghapus outline bawaan peramban dengan satu baris outline: none. Alasannya biasanya estetika: garis putus-putus di sekitar tombol dianggap merusak tampilan. Masalahnya, penghapusan itu tidak disertai pengganti. Pengguna mouse tidak menyadarinya karena mereka mengklik langsung pada sasaran. Pengguna keyboard kehilangan satu-satunya petunjuk posisi.

Peramban sebenarnya sudah memberi fokus default yang cukup baik. Chrome, Firefox, dan Safari menampilkan cincin fokus dengan gaya berbeda. Menghapusnya tanpa mengganti apa pun berarti membuang fitur aksesibilitas gratis. Jika tampilan bawaan mengganggu desain, rancang ulang gayanya, jangan hilangkan.

Membedakan fokus dari hover dan aktif

Fokus bukan hover. Hover muncul saat kursor mouse berada di atas elemen, sedangkan fokus menandai elemen yang sedang menerima input dari keyboard. Keduanya bisa terjadi bersamaan, tetapi hanya fokus yang perlu tetap terlihat setelah mouse diangkat. Gaya yang menyamakan keduanya membuat pengguna keyboard sulit membedakan elemen mana yang benar-benar siap menerima ketikan.

Elemen aktif (:active) hanya bertahan selama tombol ditekan. Fokus (:focus) bertahan sampai pengguna berpindah ke elemen lain. Karena itu, gaya fokus sebaiknya lebih menonjol dibanding gaya hover biasa.

Memilih gaya fokus yang terlihat di semua latar

Cincin fokus tunggal berwarna biru bekerja di latar putih, tetapi tenggelam di latar biru muda. Solusi yang lazim dipakai adalah dua lapis: cincin luar berwarna gelap dan cincin dalam berwarna terang, atau sebaliknya. Dengan begitu, satu lapis tetap kontras terhadap latar apa pun di belakangnya.

Untuk memastikan warna cincin cukup kontras, Anda bisa memakai alat pemeriksa rasio kontras seperti yang dibahas pada perbandingan alat cek kontras warna untuk aksesibilitas web. Ukuran minimum yang lazim dianjurkan adalah cincin setebal dua piksel dengan jarak satu hingga dua piksel dari tepi elemen, sehingga cincin tidak menempel pada batas tombol.

:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

Selektor :focus-visible membuat cincin hanya muncul saat peramban menilai fokus berasal dari keyboard. Pengguna mouse yang mengklik tombol tidak akan melihat cincin, sementara pengguna Tab tetap mendapatkannya. Dukungan selektor ini sudah merata di peramban modern, jadi tidak perlu lagi trik JavaScript untuk mendeteksi sumber input.

Menyusun urutan fokus yang masuk akal

Urutan fokus mengikuti urutan elemen di dalam dokumen HTML, bukan posisi visual di layar. Jika tata letak CSS memindahkan elemen ke kiri atau kanan dengan float atau grid, urutan Tab bisa terasa melompat-lompat. Periksa dengan menekan Tab berulang kali dari awal halaman, lalu catat apakah arahnya sesuai alur baca.

  • Pastikan elemen interaktif muncul di HTML sesuai urutan visualnya.
  • Hindari tabindex bernilai positif karena mengacak urutan alami.
  • Gunakan tabindex="-1" hanya untuk elemen yang difokuskan lewat skrip, misalnya judul setelah lompatan anchor.
  • Kelompokkan kontrol terkait dalam satu wadah agar pengguna tidak melewati puluhan tautan sebelum mencapai isi utama.

Menu navigasi dengan banyak item sering membuat pengguna harus menekan Tab belasan kali sebelum mencapai konten. Menyediakan tautan lewati ke konten (skip link) di awal halaman memangkas langkah itu. Tautan ini tersembunyi secara visual sampai menerima fokus, lalu tampil di sudut atas layar.

Menangani fokus pada komponen dinamis

Ketika pengguna membuka dialog modal, fokus harus berpindah ke dalam dialog. Setelah dialog ditutup, fokus kembali ke tombol yang membukanya. Tanpa pengelolaan ini, pengguna keyboard bisa menekan Tab dan masuk ke elemen di belakang lapisan modal yang secara visual tidak terlihat.

Untuk komponen yang memuat konten baru tanpa memuat ulang halaman, pindahkan fokus ke elemen yang berubah atau beri tahu pembaca layar lewat wilayah aria-live. Manipulasi DOM semacam ini sering dilakukan dengan JavaScript; contoh penerapannya bisa dilihat pada cara manipulasi DOM dengan jQuery untuk pemula. Prinsipnya sama, apa pun pustakanya: setiap perubahan besar sebaiknya disertai penyesuaian posisi fokus.

Daftar panjang dengan paginasi juga perlu perhatian. Setelah pengguna menekan nomor halaman berikutnya, fokus sebaiknya diarahkan ke awal daftar hasil agar mereka tidak perlu menekan Tab dari atas halaman lagi. Pola serupa dipakai saat membangun navigasi halaman di sisi server, seperti pada cara membuat pagination PHP tanpa library tambahan; tambahkan saja pemindahan fokus setelah halaman baru dimuat.

Menguji fokus dengan keyboard saja

Uji paling sederhana: lepaskan mouse dan coba selesaikan satu tugas, misalnya mengisi formulir lalu mengirimnya. Jika ada langkah yang membuat Anda menebak posisi, di situ ada masalah fokus. Lakukan pengujian ini bersama beberapa pengguna, sebagaimana dijelaskan pada panduan usability testing untuk pemula, agar temuan tidak hanya berdasarkan asumsi perancang.

Catat juga elemen yang menerima fokus tetapi tidak melakukan apa pun saat ditekan Enter atau Spasi. Elemen div dengan pengendali klik termasuk penyebab umum: terlihat seperti tombol, tetapi tidak bisa difokuskan atau diaktifkan lewat keyboard. Gantilah dengan elemen button atau a agar perilaku bawaan peramban ikut bekerja.

Ringkasan

Indikator fokus harus selalu terlihat, kontras terhadap latar apa pun, dan muncul hanya saat input berasal dari keyboard. Urutan Tab mengikuti struktur HTML, jadi susun dokumen sesuai alur baca. Komponen dinamis seperti modal dan paginasi memerlukan pemindahan fokus yang disengaja. Uji semuanya dengan melepas mouse dan mencoba menyelesaikan tugas nyata.

Pertanyaan yang Sering Diajukan

Apakah menghapus outline sepenuhnya selalu salah?

Menghapus outline bawaan boleh dilakukan asalkan Anda menggantinya dengan indikator fokus lain yang sama jelas atau lebih jelas. Yang bermasalah adalah menghilangkan tanpa pengganti.

Apa bedanya :focus dan :focus-visible?

:focus aktif setiap kali elemen menerima fokus, termasuk dari klik mouse. :focus-visible hanya aktif ketika peramban menilai fokus perlu ditampilkan, umumnya saat navigasi keyboard. Memakai :focus-visible membuat cincin fokus tidak mengganggu pengguna mouse.

Bagaimana menangani fokus pada elemen yang dibuat dengan div?

Ganti dengan elemen semantik seperti button, a, atau input. Elemen semantik sudah bisa difokuskan, merespons Enter dan Spasi, serta dikenali pembaca layar tanpa tambahan atribut.

Web Development