Membuat Tautan Lewati yang Benar-Benar Berfungsi

Tautan lewati yang berfungsi memiliki dua bagian: jangkar yang mengarah ke suatu tempat, dan target yang benar-benar dapat menjadi tempat pendaratan. Keduanya harus ada.

Jangkar adalah tautan biasa yang href-nya berupa fragmen, seperti tanda pagar yang diikuti id. Mengekliknya memberi tahu peramban ke mana harus pergi.

Target adalah elemen yang ingin Anda tuju. Berikan id yang sesuai agar fragmen dalam href memiliki tujuan.

Arahkan tautan lewati ke landmark main. Landmark ini merupakan satu-satunya wilayah yang memuat konten unik halaman, tepat di tempat pengguna ingin mendarat.

Masalah lama yang sering muncul: tautan menggulir halaman, tetapi focus tetap berada pada tautan. Tab berikutnya mengirim pengguna kembali ke navigasi.

Perbaikannya adalah memungkinkan focus benar-benar berpindah ke sana. Tambahkan tabindex sama dengan minus satu agar target dapat menerima focus dari tautan lewati.

Minus satu berarti dapat dituju skrip dan tautan, tetapi tidak berada dalam urutan Tab. Elemen tersebut tidak akan menjadi perhentian Tab tambahan bagi pengguna lain.

Saat ini, sebagian besar peramban memindahkan focus ke target fragmen secara otomatis. Namun, menambahkan tabindex minus satu menjamin hal ini berfungsi di mana pun, jadi tetaplah menambahkannya.

Muat ulang, tekan Tab sekali, lalu Enter. Indikator focus seharusnya berpindah ke konten, dan Tab berikutnya seharusnya melanjutkan di dalamnya. ✅

Beri label secara jelas. Lewati ke konten utama memberi tahu pengguna dengan tepat apa yang akan terjadi, jauh lebih baik daripada Lewati yang samar atau ikon.

Tempatkan jangkar sebagai anak pertama body, sebelum header, agar Tab mencapainya sebelum elemen lain di halaman.

Hubungkan jangkar ke id yang sesuai pada main, tambahkan tabindex minus satu, dan uji dengan berpindah menggunakan Tab. Itulah tautan lewati yang benar-benar berfungsi. 🎯