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 ditunjukkan dengan
lingkaran fokus, dan berbagai browser menata gaya lingkaran fokusnya secara berbeda. Urutan
fokus yang bergerak 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 secara 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 dengan elemen tersebut.
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 Anda:
- Mengatur elemen dalam DOM agar dalam urutan yang logis
- Tetapkan dengan benar visibilitas konten di balik layar yang seharusnya tidak menerima fokus
Mengatur elemen dalam DOM agar 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, yaitu dari kiri ke kanan, dari atas ke bawah halaman Anda.
Jika urutan fokus tampak salah, Anda harus mengatur ulang elemen di DOM agar urutan tab lebih natural. Jika Anda ingin sesuatu muncul secara visual lebih awal di layar, pindahkan lebih awal di DOM.
Coba tekan tombol tab melalui dua kumpulan tombol di bawah ini untuk melihat urutan tab yang logis versus urutan tab yang tidak logis:
Urutan tab logis
Urutan tab tidak logis
Kode untuk kedua contoh ini dibandingkan di bawah ini:
Urutan tab logis
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Urutan tab 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 agar 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 navigasi samping responsif yang terbuka saat Anda mengklik tombol, pengguna tidak akan dapat berfokus pada navigasi samping saat tertutup.
Untuk mencegah elemen interaktif tertentu menerima fokus, Anda harus memberikan salah satu properti CSS berikut pada elemen:
display: nonevisibility: hidden
Untuk menambahkan kembali elemen ke urutan tab, misalnya saat navigasi samping dibuka, ganti properti CSS di atas masing-masing dengan:
display: blockvisibility: visible
Langkah berikutnya
Untuk pengguna yang mengoperasikan komputernya hampir sepenuhnya dengan keyboard atau perangkat input lainnya, urutan tab yang logis sangat penting agar aplikasi Anda dapat diakses dan digunakan. Sebagai kebiasaan yang baik untuk memeriksa urutan tab Anda, coba melakukan tab pada aplikasi Anda sebelum setiap publikasi.