Mengontrol fokus dengan tabindex

Rob Dodson

Alexandra Klepper

Elemen HTML standar seperti <button> atau <input> memiliki aksesibilitas keyboard bawaan, dan harus digunakan jika memungkinkan. Namun, jika perlu membuat elemen interaktif kustom, Anda dapat membuat perilaku pengguna yang diharapkan dengan menambahkan tabindex.

Dukungan Browser

• 1
• 12
• 1.5
• 3.1

Sumber

Tips: Pelajari lebih lanjut fokus keyboard di kursus Pembelajaran Aksesibilitas.

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

Catatan: Jika memungkinkan, gunakan elemen HTML bawaan, bukan membuat versi kustom Anda sendiri. Misalnya, <button> sudah memiliki dukungan keyboard penuh. Dengan demikian, Anda tidak perlu mengelola tabindex dan menambahkan semantik dengan ARIA.

Apa yang dimaksud dengan tabindex?

Jika perlu mengubah urutan tab default yang disediakan oleh elemen bawaan, Anda dapat menggunakan atribut HTML tabindex untuk menetapkan posisi tab elemen secara eksplisit.

tabindex dapat diterapkan ke elemen apa pun, meskipun hanya boleh diterapkan ke elemen interaktif, 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. Menggunakan tabindex yang lebih besar dari 0 dianggap sebagai anti-pola.

Memastikan kontrol dapat diakses dengan keyboard

Alat seperti Lighthouse sangat bagus dalam mendeteksi masalah aksesibilitas tertentu secara otomatis, tetapi beberapa pengujian masih harus dilakukan secara manual oleh manusia.

Tips: Baca tentang pengujian aksesibilitas otomatis dan manual di Pelajari Aksesibilitas.

Coba tekan tombol Tab untuk membuka situs Anda. Apakah Anda dapat menjangkau semua kontrol interaktif di halaman? Jika tidak, Anda mungkin perlu menggunakan tabindex untuk meningkatkan kemampuan fokus kontrol tersebut.

Peringatan: Jika Anda tidak melihat indikator fokus, indikator tersebut mungkin disembunyikan oleh CSS. Periksa :focus { outline: none; }. Anda dapat mempelajari cara memperbaikinya dalam panduan kami tentang gaya fokus.

Mengelola fokus di tingkat halaman

Terkadang, tabindex membantu menciptakan pengalaman pengguna yang lancar. Misalnya, jika Anda membuat halaman tunggal yang andal dengan berbagai bagian konten, dengan beberapa konten disembunyikan di berbagai titik dalam pemuatan halaman. 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 dengan Elemen Kustom.

Boleh jadi sulit mengetahui perilaku keyboard mana yang akan diimplementasikan. Panduan Praktik Penulisan Accessible Rich Internet Applications (ARIA) mencantumkan jenis komponen dan jenis tindakan keyboard yang didukungnya.

Menyisipkan elemen ke dalam urutan tab

Menyisipkan elemen ke dalam urutan tab alami menggunakan tabindex="0". Contoh:

<div tabindex="0">Focus me with the TAB key</div>

Untuk memfokuskan elemen, tekan tombol Tab atau panggil metode focus() elemen.

Menghapus elemen dari urutan tab

Hapus elemen menggunakan tabindex="-1". Contoh:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Tindakan ini akan menghapus elemen dari urutan tab alami, tetapi elemen masih dapat difokuskan dengan memanggil metode focus()-nya.

Menerapkan tabindex="-1" ke elemen tidak memengaruhi turunannya; jika berada dalam urutan tab secara alami atau karena nilai tabindex, elemen tersebut akan tetap berada dalam urutan tab. Untuk menghapus elemen dan semua turunannya dari urutan tab, pertimbangkan untuk menggunakan polyfill inert WICG. Polyfill mengemulasikan perilaku atribut inert yang diusulkan, yang mencegah elemen dipilih atau dibaca oleh teknologi pendukung.

Perhatian: polyfill inert bersifat eksperimental dan mungkin tidak berfungsi seperti yang diharapkan dalam semua kasus. Uji dengan cermat sebelum digunakan dalam produksi.

Menghindarintabindex > 0

tabindex yang lebih besar dari 0 akan melompatkan elemen ke 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.

Menggunakan tabindex yang lebih besar dari 0 dianggap sebagai anti-pola karena pembaca layar menavigasi halaman dalam urutan DOM, bukan urutan tab. Jika Anda memerlukan elemen untuk muncul lebih awal dalam urutan tab, elemen tersebut harus dipindahkan ke tempat yang lebih awal di DOM.

Dengan Lighthouse, Anda dapat mengidentifikasi elemen dengan tabindex > 0. Jalankan Audit Aksesibilitas (Lighthouse > Opsi > Aksesibilitas) dan cari hasil audit "Tidak ada elemen yang memiliki nilai [tabindex] lebih besar dari 0".

Menggunakan "tabindex keliling"

Jika membuat komponen yang kompleks, Anda mungkin perlu menambahkan dukungan keyboard tambahan di luar fokus. Jika memungkinkan, gunakan elemen select bawaan. Elemen ini dapat difokuskan dan memungkinkan tombol panah untuk mengekspos opsi tambahan yang dapat dipilih.

Untuk menerapkan fungsi serupa di komponen Anda sendiri, Anda dapat menggunakan teknik yang dikenal sebagai "roving tabindex". Roving tabindex berfungsi dengan menetapkan tabindex ke -1 untuk semua turunan kecuali yang saat ini aktif. Komponen kemudian menggunakan pemroses peristiwa keyboard untuk menentukan tombol mana yang telah 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 focus() di dalamnya.

Sebelum

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Setelah

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

Catatan: Atribut role="" memungkinkan Anda mengubah semantik elemen, sehingga diucapkan dengan benar oleh pembaca layar. Anda dapat mempelajarinya lebih lanjut dalam panduan kami tentang dasar-dasar pembaca layar.

Resep akses keyboard

Jika tidak yakin tingkat dukungan keyboard yang mungkin diperlukan komponen kustom Anda, Anda dapat melihat ARIA Authoring Practices 1.1. Panduan ini mencantumkan pola UI umum dan mengidentifikasi tombol yang harus didukung komponen Anda.