Mengontrol fokus dengan tabindex

Rob Dodson

Alexandra Klepper

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

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

Apa itu tabindex?

Jika Anda perlu mengubah urutan tab {i>default<i} yang disediakan oleh Anda dapat menggunakan atribut HTML tabindex untuk menetapkan posisi tab elemen.

tabindex dapat diterapkan ke elemen apa pun, meskipun hanya boleh diterapkan ke elemen interaktif, dan mengambil berbagai nilai integer. 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 ini 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 membawa elemen tersebut 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.

Memastikan kontrol dapat diakses dengan keyboard

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

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

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 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 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.

Mengetahui perilaku keyboard mana yang akan diimplementasikan bisa sulit. Tujuan Penulisan Aplikasi Rich Internet yang Aksesibel (ARIA) Praktik daftar jenis komponen dan jenis tindakan {i>keyboard<i} apa yang didukungnya.

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>

Ini menghapus elemen dari urutan tab alami, tetapi elemen masih bisa difokuskan dengan memanggil metode focus().

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.

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 mencari hasil "Tidak ada elemen yang memiliki nilai [tabindex] yang lebih besar dari 0" audit.

Menggunakan "jalan-jalan tabindex"

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

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

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

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>

Resep akses keyboard

Jika Anda tidak yakin tingkat dukungan keyboard yang memungkinkan komponen kustom Anda Anda dapat merujuk ke ARIA Authoring Practices 1.1. Panduan ini mencantumkan pola UI umum dan mengidentifikasi kunci mana harus didukung oleh komponen tersebut.