Dasar-dasar akses keyboard

Rob Dodson

Banyak pengguna yang mengandalkan keyboard untuk menavigasi 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 saat tertentu, fokus mengacu pada elemen mana di aplikasi Anda yang secara aktif menerima input dari keyboard, seperti kolom, kotak centang, tombol atau link. Selain peristiwa keyboard, elemen yang difokuskan juga mendapatkan konten yang ditempel dari papan klip.

Untuk memindahkan fokus di halaman, gunakan TAB untuk berpindah "maju" dan SHIFT + TAB untuk berpindah "mundur". Elemen yang difokuskan sering kali ditunjukkan oleh cincin fokus, dan berbagai browser menata gaya cincin fokusnya secara berbeda. Urutan fokus 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 otomatis dimasukkan 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 Anda. Ada dua ide utama yang perlu diingat saat menilai dan menyesuaikan urutan tab Anda:

1. Atur elemen dalam DOM agar berada dalam urutan logis
2. Menetapkan visibilitas konten di luar layar yang tidak boleh menerima fokus dengan benar

Atur elemen dalam DOM agar berada dalam urutan logis

Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba tekan tab di halaman Anda. Secara umum, fokus harus mengikuti urutan pembacaan, berpindah dari kiri ke kanan, dari atas ke bawah halaman Anda.

Jika urutan fokus tampak salah, Anda harus mengatur ulang elemen dalam DOM untuk membuat urutan tab lebih alami. Untuk mengubah susunan visual di situs Anda, pindahkan lebih awal di DOM, bukan menata gayanya agar muncul lebih awal dengan CSS.

Contoh:

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</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, kami memindahkan tombol "Kiwi" mengambang agar muncul setelah Coconut dan menghapus gaya inline.

Menetapkan visibilitas konten di luar layar dengan benar

Terkadang elemen interaktif di luar layar perlu berada di DOM, tetapi tidak boleh berada dalam urutan tab Anda. Misalnya, jika Anda memiliki navigasi responsif yang terbuka di sidebar saat tombol diklik, pengguna tidak boleh dapat memfokuskan navigasi saat ditutup.

Untuk mencegah elemen interaktif tertentu menerima fokus, Anda harus memberikan salah satu properti CSS berikut kepada elemen:

• display: none
• visibility: hidden

Untuk menambahkan kembali elemen ke dalam urutan tab, misalnya saat navigasi terbuka, ganti properti CSS ini masing-masing dengan:

• display: block
• visibility: visible

Langkah berikutnya

Bagi pengguna yang mengoperasikan komputer hampir sepenuhnya dengan keyboard atau perangkat input lain, urutan tab yang logis sangat penting untuk membuat aplikasi Anda dapat diakses dan digunakan. Sebagai kebiasaan baik untuk memeriksa urutan tab, coba tab melalui aplikasi Anda sebelum setiap publikasi.