Mengontrol fokus dengan tabindex

Elemen HTML standar seperti <button> atau <input> memiliki aksesibilitas keyboard bawaan secara gratis. Namun, jika Anda mem-build komponen interaktif kustom, gunakan atribut tabindex untuk memastikan bahwa komponen tersebut dapat diakses dengan keyboard.

Periksa apakah kontrol Anda dapat diakses dari keyboard

Alat seperti Lighthouse sangat bagus dalam mendeteksi masalah aksesibilitas tertentu, tetapi beberapa hal hanya dapat diuji oleh manusia.

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

Menyisipkan elemen ke dalam urutan tab

Sisipkan 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 difokus dengan memanggil metode focus()-nya.

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

Menghindarintabindex > 0

Setiap tabindex yang lebih besar dari 0 akan melompati elemen ke depan urutan tab alami. Jika ada beberapa elemen dengan tabindex yang lebih besar dari 0, urutan tab akan dimulai dari nilai terendah yang lebih besar dari nol dan terus meningkat.

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

Lighthouse memudahkan identifikasi 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".

Membuat komponen yang dapat diakses dengan "roving tabindex"

Jika membangun komponen yang kompleks, Anda mungkin perlu menambahkan dukungan keyboard tambahan di luar fokus. Pertimbangkan elemen select bawaan. Tombol ini dapat difokuskan dan Anda dapat menggunakan tombol panah untuk menampilkan fungsi tambahan (opsi yang dapat dipilih).

Untuk mengimplementasikan fungsi serupa dalam komponen Anda sendiri, gunakan teknik yang dikenal sebagai "roving tabindex". Roving tabindex berfungsi dengan menetapkan tabindex ke -1 untuk semua turunan kecuali yang sedang aktif. Komponen ini kemudian menggunakan pemroses peristiwa keyboard untuk menentukan tombol mana yang telah ditekan pengguna.

Jika ini terjadi, komponen akan menetapkan tabindex turunan yang sebelumnya difokuskan ke -1, menetapkan tabindex turunan yang akan difokuskan ke 0, dan memanggil metode focus() padanya.

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>

TODO: DevSite - Pikirkan dan Periksa penilaian

Resep akses keyboard

Jika tidak yakin tingkat dukungan keyboard apa yang mungkin diperlukan oleh komponen kustom, Anda dapat melihat Praktik Penulisan ARIA 1.1. Panduan praktis ini mencantumkan pola UI umum dan mengidentifikasi kunci mana yang harus didukung komponen Anda.