Halaman ini diterjemahkan oleh Cloud Translation API.

Menggunakan tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Urutan tab default yang disediakan oleh posisi DOM elemen HTML semantik sangat praktis, tetapi terkadang Anda perlu mengubah urutan tab. Memindahkan elemen di HTML adalah hal yang ideal, tetapi mungkin tidak memungkinkan. Dalam hal ini, Anda dapat menggunakan atribut HTML tabindex untuk menetapkan posisi tab elemen secara eksplisit.

Browser Support

Source

tabindex dapat diterapkan ke elemen apa pun, meskipun tidak selalu berguna di 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": Tabindex apa pun 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 dimulai dari nilai terendah yang lebih besar dari nol dan terus meningkat.

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 ke kontrol interaktif kustom seperti tombol, tab, dropdown, dan kolom teks; yaitu, elemen yang 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 memberikan pengalaman pengguna yang lancar. Misalnya, jika Anda membuat satu halaman yang andal dengan berbagai bagian konten, dengan tidak semua konten 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 dari -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 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 di sana, Anda dapat menggunakan tombol panah untuk menampilkan 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.

Mengetahui perilaku keyboard yang akan diterapkan bisa jadi sulit. Panduan Praktik Penulisan Aplikasi Rich Internet 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 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 roving.

Tabindex keliling 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 mana yang ditekan pengguna; saat hal ini terjadi, komponen akan menetapkan tabindex turunan yang sebelumnya difokuskan ke -1, menetapkan tabindex turunan yang akan difokuskan ke 0, dan memanggil metode fokus di dalamnya.

<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 yang mereka gunakan untuk memindahkan fokus), fokus akan berulang 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 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 menutup 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 tidak aktif secara default, untuk membuat modal bagi pengguna sekaligus memblokir klik dan tab di luar modal. Hal ini memungkinkan pengguna berfokus pada pilihan yang diperlukan.