Banyak pengguna yang berbeda mengandalkan keyboard untuk menavigasi aplikasi—mulai dari pengguna yang memiliki gangguan motorik sementara dan permanen hingga pengguna yang menggunakan pintasan keyboard agar lebih efisien dan produktif. Memiliki strategi navigasi keyboard yang baik untuk aplikasi Anda akan menciptakan pengalaman yang lebih baik bagi semua orang.
Fokus dan urutan tab
Pada waktu tertentu, fokus mengacu pada elemen apa dalam aplikasi Anda (seperti kolom, kotak centang, tombol, atau link) yang saat ini menerima input dari keyboard. Selain menerima peristiwa keyboard, elemen yang difokuskan juga mendapatkan konten yang ditempelkan dari papan klip.
Untuk memindahkan fokus pada halaman, gunakan TAB untuk menavigasi "maju" dan SHIFT + TAB
untuk menavigasi "mundur". Elemen yang saat ini difokuskan sering kali ditunjukkan oleh
lingkaran fokus, dan berbagai browser menata gaya lingkaran fokus mereka secara berbeda. Urutan
fokus yang maju dan mundur melalui elemen interaktif
disebut urutan tab.
Elemen HTML interaktif seperti kolom teks, tombol, dan daftar pilihan dapat difokuskan secara implisit: elemen tersebut otomatis disisipkan ke dalam urutan tab berdasarkan posisinya di DOM. Elemen interaktif ini juga memiliki penanganan peristiwa keyboard bawaan. Elemen seperti paragraf dan div tidak dapat difokuskan secara implisit karena pengguna biasanya tidak perlu berinteraksi dengannya.
Menerapkan urutan tab yang logis adalah bagian penting dalam memberikan pengalaman navigasi keyboard yang lancar kepada pengguna. Ada dua ide utama yang perlu diingat saat menilai dan menyesuaikan urutan tab:
- Mengatur elemen dalam DOM agar berada dalam urutan yang logis
- Tetapkan dengan benar visibilitas konten di balik layar yang seharusnya tidak menerima fokus
Mengatur elemen dalam DOM agar berada dalam urutan yang logis
Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba cari melalui tab melalui halaman Anda. Secara umum, fokus harus mengikuti urutan pembacaan, bergerak dari kiri ke kanan, dari atas ke bawah halaman.
Jika urutan fokus tampaknya salah, Anda harus mengatur ulang elemen di DOM untuk membuat urutan tab lebih alami. Jika Anda ingin sesuatu muncul secara visual lebih awal di layar, pindahkan lebih awal di DOM.
Coba gunakan tombol tab pada dua kumpulan tombol di bawah untuk merasakan urutan tab yang logis versus urutan tab yang tidak logis:
Urutan tab logis
Urutan tab yang tidak logis
Kode untuk dua contoh ini dibandingkan di bawah:
Urutan tab logis
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Urutan tab yang tidak logis
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Berhati-hatilah saat mengubah posisi visual elemen menggunakan CSS untuk menghindari pembuatan urutan tab yang tidak logis. Untuk memperbaiki urutan tab yang tidak logis di atas, pindahkan tombol "Kiwi" mengambang sehingga muncul setelah tombol "Coconut" di DOM, dan hapus gaya inline.
Menyetel visibilitas konten di balik layar dengan benar
Terkadang elemen interaktif di luar layar harus ada di DOM, tetapi tidak boleh dalam urutan tab. Misalnya, jika Anda memiliki menu samping responsif yang terbuka saat Anda mengklik tombol, pengguna tidak akan dapat berfokus pada menu samping saat ditutup.
Untuk mencegah elemen interaktif tertentu menerima fokus, Anda harus memberi elemen salah satu properti CSS berikut:
display: nonevisibility: hidden
Untuk menambahkan elemen kembali ke urutan tab, misalnya saat menu samping dibuka, ganti properti CSS di atas dengan:
display: blockvisibility: visible
Langkah berikutnya
Untuk pengguna yang mengoperasikan komputer mereka hampir sepenuhnya dengan keyboard atau perangkat input lainnya, urutan tab yang logis sangat penting untuk membuat aplikasi Anda dapat diakses dan digunakan. Sebagai kebiasaan yang baik untuk memeriksa urutan tab, coba tekan tab di seluruh aplikasi sebelum setiap publikasi.