Banyak pengguna yang berbeda mengandalkan {i>keyboard<i} untuk menavigasi aplikasi—dari pengguna dengan gangguan motorik sementara dan permanen bagi pengguna yang menggunakan {i>keyboard<i} {i>shortcut<i} untuk menjadi lebih efisien dan produktif. Memiliki navigasi {i>keyboard<i} yang baik 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 {i>field<i}, kotak centang, tombol, atau tautan) yang saat ini menerima input dari {i>keyboard<i}. Selain menerima peristiwa keyboard, elemen yang difokuskan juga mendapatkan konten yang ditempelkan dari {i>clipboard<i}.
Untuk memindahkan fokus pada halaman, gunakan TAB untuk menavigasi ke "maju" dan SHIFT + TAB
untuk menavigasi "mundur". Elemen yang saat ini difokuskan
sering kali ditandai dengan
lingkaran fokus, dan berbagai browser menata gaya cincin fokusnya secara berbeda. Tujuan
urutan maju dan mundur melalui elemen interaktif
disebut urutan tab.
Elemen HTML interaktif seperti {i>text field<i}, tombol, dan daftar pilihan dapat difokuskan secara implisit: tombol otomatis disisipkan ke dalam urutan tab berdasarkan posisinya di DOM. Elemen interaktif ini juga memiliki penanganan peristiwa keyboard bawaan. Elements seperti paragraf dan div tidak secara implisit dapat difokuskan karena pengguna biasanya tidak perlu berinteraksi dengan mereka.
Menerapkan urutan tab yang logis adalah bagian penting dalam memberikan pengguna dengan pengalaman navigasi keyboard yang lancar. Ada dua ide utama untuk dijaga saat menilai dan menyesuaikan urutan tab:
- Mengatur elemen dalam DOM agar dalam urutan yang logis
- Tetapkan dengan benar visibilitas konten di balik layar yang seharusnya tidak diterima fokus
Mengatur elemen dalam DOM agar dalam urutan yang logis
Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba telusuri kami. Secara umum, fokus harus mengikuti urutan membaca, bergerak dari kiri ke kanan, dari bagian atas ke bagian bawah halaman.
Jika urutan fokus tampak salah, Anda harus mengatur ulang elemen dalam DOM untuk membuat urutan tab lebih alami. Jika Anda ingin menampilkan sesuatu secara visual lebih awal di layar, pindahkan lebih awal di DOM.
Cobalah menekan tombol tab melalui dua kumpulan tombol di bawah ini untuk merasakan tab yang logis urutan 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>
Hati-hati saat mengubah posisi visual elemen dengan CSS untuk menghindari membuat urutan tab yang tidak logis. Untuk memperbaiki urutan tab yang tidak logis di atas, pindahkan "Kiwi" mengambang sehingga muncul setelah kata "Coconut" di DOM, dan menghapus gaya {i>inline<i}.
Menyetel visibilitas konten di balik layar dengan benar
Kadang-kadang elemen interaktif di luar layar perlu ada di DOM tetapi tidak boleh dalam urutan tab Anda. Misalnya, jika Anda memiliki navigasi samping responsif yang membuka saat Anda mengeklik tombol, pengguna seharusnya tidak dapat fokus pada navigasi samping saat tutup.
Untuk mencegah elemen interaktif tertentu menerima fokus, Anda harus berikan salah satu properti CSS berikut pada elemen:
display: nonevisibility: hidden
Untuk menambahkan kembali elemen ke dalam urutan tab, misalnya saat navigasi samping dibuka, ganti properti CSS di atas masing-masing dengan:
display: blockvisibility: visible
Langkah berikutnya
Untuk pengguna yang mengoperasikan komputer mereka hampir sepenuhnya dengan {i>keyboard<i} atau perangkat input lainnya, urutan tab yang logis sangat penting agar dapat diakses dan digunakan. Sebagai kebiasaan yang baik untuk memeriksa urutan tab, coba tekan tab melalui aplikasi Anda sebelum setiap publikasi.