Berbagai pengguna bergantung pada keyboard untuk membuka aplikasi, mulai dari pengguna dengan 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 dengan
lingkaran fokus, dan berbagai browser mengatur gaya lingkaran fokusnya secara berbeda. Urutan
ketika fokus bergerak maju dan mundur melalui elemen interaktif
disebut urutan tab.
Elemen HTML interaktif seperti kolom teks, tombol, dan daftar tertentu secara implisit dapat difokuskan: 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 dengan elemen tersebut.
Mengimplementasikan urutan tab yang logis merupakan 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 dalam urutan yang logis
- Menyetel visibilitas konten di luar layar yang seharusnya tidak menerima fokus dengan benar
Mengatur elemen dalam DOM agar dalam urutan yang logis
Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba berpindah antar-halaman pada halaman. Secara umum, fokus harus mengikuti urutan pembacaan, bergerak dari kiri ke kanan, dari atas ke bawah halaman.
Jika urutan fokus terlihat salah, Anda harus mengatur ulang elemen dalam DOM agar urutan tab lebih natural. Jika Anda ingin sesuatu muncul secara visual lebih awal di layar, pindahkan ke awal di DOM.
Coba telusuri 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 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 berada dalam 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 tombol ditutup.
Untuk mencegah elemen interaktif tertentu menerima fokus, Anda harus memberikan elemen salah satu properti CSS berikut:
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 hampir sepenuhnya mengoperasikan komputer 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, coba telusuri aplikasi Anda sebelum melakukan publikasi.