Menggunakan tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Urutan tab default yang disediakan oleh posisi DOM elemen HTML semantik memang praktis, tetapi terkadang Anda perlu mengubah urutan tab. Memindahkan elemen dalam HTML adalah cara yang ideal, tetapi mungkin tidak dapat dilakukan. Dalam kasus ini, Anda dapat menggunakan atribut HTML tabindex untuk menetapkan posisi tab elemen secara eksplisit.

tabindex dapat diterapkan ke elemen apa pun, meskipun tidak selalu berguna pada setiap elemen, dan menggunakan rentang nilai bilangan bulat. Dengan tabindex, Anda dapat menentukan urutan eksplisit untuk elemen halaman yang dapat difokuskan, menyisipkan elemen yang tidak dapat difokuskan ke dalam urutan tab, dan menghapus elemen dari urutan tab. Contoh:

tabindex="0": Menyisipkan elemen ke dalam urutan tab alami. Elemen dapat difokuskan dengan menekan Tab, dan elemen dapat difokuskan dengan memanggil metode focus()-nya.

tabindex="-1": Menghapus elemen dari urutan tab alami, tetapi elemen masih dapat difokuskan dengan memanggil metode focus()-nya.

tabindex="5": Nilai tabindex yang lebih besar dari 0 akan membawa elemen tersebut ke depan urutan tab alami. Jika ada beberapa elemen dengan tabindex yang lebih besar dari 0, urutan tab dimulai dari nilai terendah yang lebih besar dari nol dan berlanjut ke nilai yang lebih tinggi.

Hal ini terutama berlaku untuk elemen non-input seperti header, gambar, atau judul artikel. Jika memungkinkan, sebaiknya atur kode sumber Anda sehingga urutan DOM memberikan urutan tab yang logis. Jika Anda menggunakan tabindex, batasi penggunaannya pada kontrol interaktif kustom seperti tombol, tab, dropdown, dan kolom teks; yaitu, elemen yang mungkin diharapkan pengguna untuk memberikan input.

Hanya tambahkan tabindex ke konten yang interaktif. Meskipun konten penting, seperti gambar utama, pengguna pembaca layar dapat memahaminya tanpa menambahkan fokus.

Mengelola fokus di tingkat halaman

Terkadang, tabindex diperlukan untuk pengalaman pengguna yang lancar. Misalnya, jika Anda membuat halaman tunggal yang kuat dengan bagian konten yang berbeda, yang tidak semua kontennya terlihat secara bersamaan. Hal ini dapat berarti link navigasi mengubah konten yang terlihat, tanpa memuat ulang halaman.

Dalam hal ini, identifikasi area konten yang dipilih, beri tabindex dengan -1, dan panggil metode focus-nya. Hal ini memastikan konten tidak muncul dalam urutan tab alami. Teknik ini, yang disebut mengelola fokus, menjaga konteks yang dirasakan pengguna tetap sinkron dengan konten visual situs.

Mengelola fokus dalam komponen

Dalam beberapa kasus, Anda juga harus mengelola fokus di tingkat kontrol, seperti dengan komponen kustom.

Misalnya, elemen select dapat menerima fokus dasar, tetapi setelah berada di sana, Anda dapat menggunakan tombol panah untuk menampilkan opsi tambahan yang dapat dipilih. Jika Anda membuat elemen select kustom, penting untuk mereplikasi perilaku tersebut, sehingga pengguna keyboard tetap dapat berinteraksi dengan kontrol Anda.

Mengetahui perilaku keyboard mana yang harus diterapkan bisa jadi sulit. Panduan Praktik Penulisan Aplikasi Internet Multimedia yang Dapat Diakses (ARIA) mencantumkan jenis komponen dan jenis tindakan keyboard yang didukungnya.

Mungkin Anda sedang mengerjakan Elemen Kustom yang menyerupai sekumpulan tombol pilihan, tetapi dengan tampilan dan perilaku yang unik.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Untuk menentukan dukungan keyboard yang mereka butuhkan, lihat panduan Praktik Penulisan ARIA. Bagian 2 berisi daftar pola desain, termasuk tabel karakteristik untuk grup radio, komponen yang ada yang paling cocok dengan elemen baru Anda.

Salah satu perilaku keyboard umum yang harus didukung adalah tombol panah atas/bawah/kiri/kanan. Untuk menambahkan perilaku ini ke komponen baru, kita menggunakan teknik yang disebut tabindex bergerak.

Tabindex roaming berfungsi dengan menyetel tabindex ke -1 untuk semua turunan kecuali yang sedang aktif.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Komponen menggunakan pemroses peristiwa keyboard untuk menentukan tombol mana yang ditekan pengguna; saat ini terjadi, komponen menetapkan tabindex turunan yang sebelumnya difokuskan ke -1, menetapkan tabindex turunan yang akan difokuskan ke 0, dan memanggil metode fokus padanya.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Saat pengguna mencapai turunan terakhir (atau pertama, bergantung pada arah fokus yang dipindahkan), fokus akan kembali ke turunan pertama (atau terakhir).

Coba contoh berikut. Periksa elemen di DevTools untuk mengamati tabindex yang berpindah dari satu tombol pilihan ke tombol pilihan berikutnya.

Modal dan perangkap keyboard

Sebaiknya hindari pengelolaan fokus secara manual, karena dapat menyebabkan situasi yang rumit. Misalnya, widget pelengkapan otomatis yang mencoba mengelola fokus dan merekam perilaku tab, tetapi mencegah pengguna keluar dari widget tersebut hingga selesai. Hal ini disebut perangkap keyboard, dan dapat sangat menjengkelkan bagi pengguna.

Bagian 2.1.2 WCAG menyatakan bahwa fokus keyboard tidak boleh terkunci atau terperangkap pada satu elemen halaman tertentu. Pengguna harus dapat membuka dan keluar dari semua elemen halaman hanya menggunakan keyboard.

Pengecualian untuk aturan ini adalah modal. Namun, Anda tetap harus menghindari penggunaan tabindex saat membuat modal. Dengan inert, Anda dapat memastikan bahwa pengguna tidak dapat berinteraksi dengan elemen secara tidak sengaja (perangkap keyboard yang disengaja). Gunakan elemen <dialog>, yang secara default tidak aktif, untuk membuat modal bagi pengguna sambil memblokir klik dan tab di luar modal. Hal ini memungkinkan pengguna berfokus pada pilihan yang diperlukan.