Menggunakan tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Urutan tab default yang disediakan oleh posisi DOM elemen HTML semantik sudah praktis, tetapi terkadang Anda perlu mengubah urutan tab. Memindahkan elemen pada HTML sangat ideal, tetapi mungkin tidak memungkinkan. 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 difokus, menyisipkan elemen yang tidak dapat difokus 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 tetap dapat difokuskan dengan memanggil metode focus()-nya.

tabindex="5": Tabindex yang lebih besar dari 0 akan menempatkan elemen tersebut di depan urutan tab alami. Jika ada beberapa elemen dengan tabindex lebih besar dari 0, urutan tab akan dimulai dari nilai terendah yang lebih besar dari nol dan terus ke atas.

Hal ini khususnya berlaku untuk elemen non-input seperti header, gambar, atau judul artikel. Jika memungkinkan, sebaiknya susun kode sumber Anda agar urutan DOM menyediakan urutan tab yang logis. Jika Anda menggunakan tabindex, batasi ke 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 bersifat 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 andal dengan berbagai bagian konten, 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 dan beri tabindex -1 dan panggil metode focus-nya. Hal ini memastikan konten tidak muncul dalam urutan tab alami. Teknik ini, yang disebut mengelola fokus, membuat konteks yang dipersepsi pengguna tetap sinkron dengan konten visual situs.

Mengelola fokus di komponen

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

Misalnya, elemen select dapat menerima fokus dasar, tetapi setelah ada, Anda dapat menggunakan tombol panah untuk mengekspos opsi tambahan yang dapat dipilih. Jika Anda mem-build elemen select kustom, penting untuk mereplikasi perilaku tersebut, sehingga pengguna keyboard tetap dapat berinteraksi dengan kontrol Anda.

Boleh jadi sulit mengetahui perilaku keyboard mana yang akan diimplementasikan. Panduan Praktik Menulis Aplikasi Multimedia yang Dapat Diakses (ARIA) mencantumkan jenis komponen dan jenis tindakan keyboard yang didukungnya.

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

<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 diperlukan, lihat panduan Praktik PenulisanARIA. Bagian 2 berisi daftar pola desain, termasuk tabel karakteristik untuk grup tombol pilihan, 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 roving tabindex.

Roving tabindex berfungsi dengan menetapkan tabindex ke -1 untuk semua turunan kecuali yang saat ini 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 yang ditekan pengguna; jika hal ini terjadi, komponen akan menetapkan tabindex turunan yang difokuskan sebelumnya ke -1, menetapkan tabindex turunan yang akan difokuskan ke 0, dan memanggil metode fokus pada komponen tersebut.

<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 arahnya memindahkan fokus), fokus akan berulang kembali ke turunan pertama (atau terakhir).

Coba contoh berikut. Periksa elemen di DevTools untuk mengamati pergerakan tabindex dari satu tombol radio ke tombol berikutnya.

Modal dan jebakan keyboard

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

Bagian 2.1.2 WCAG menyatakan bahwa fokus keyboard tidak boleh dikunci atau terjebak di satu elemen halaman tertentu. Pengguna harus dapat membuka dan keluar dari semua elemen halaman hanya dengan 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 tidak aktif secara default, untuk membuat modal bagi pengguna sekaligus memblokir klik dan tab di luar modal. Dengan begitu, pengguna dapat berfokus pada pilihan yang diperlukan.