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 interaktif. Bahkan jika konten penting, seperti gambar kunci, 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 difokuskan, memasukkan 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 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 masih 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 dimulai dari nilai terendah yang lebih besar dari nol dan terus meningkat. Menggunakan tabindex yang lebih besar dari 0 dianggap anti pola.

Memastikan kontrol dapat diakses dari 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 menjelajahi situs Anda. Apakah Anda dapat menjangkau semua kontrol interaktif pada halaman? Jika tidak, Anda mungkin perlu menggunakan tabindex untuk meningkatkan fokus kontrol tersebut.

Mengelola fokus di tingkat halaman

Terkadang, tabindex membantu menciptakan pengalaman pengguna yang lancar. Misalnya, jika Anda membuat satu laman yang lengkap dengan bagian konten yang berbeda, di mana beberapa konten disembunyikan di titik yang berbeda dalam pemuatan halaman. Hal ini dapat berarti tautan navigasi mengubah konten yang terlihat, tanpa memuat ulang halaman.

Dalam hal ini, identifikasi area konten yang dipilih dan beri tabindex -1 dan memanggil metode focus-nya. Hal ini memastikan konten tidak muncul di urutan tab alami. Teknik ini, yang disebut mengelola fokus, mempertahankan konteks yang dirasakan pengguna dan sinkron dengan konten visual situs.

Mengelola fokus dalam 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 akan memengaruhi turunannya; jika berada di urutan tab secara alami atau karena nilai tabindex, mereka akan tetap berada 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

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

Menggunakan tabindex yang lebih besar dari 0 dianggap sebagai anti-pola karena pembaca layar menavigasi halaman dalam urutan DOM, bukan dalam urutan tab. Jika Anda memerlukan agar muncul lebih cepat dalam urutan tab, elemen tersebut harus dipindahkan ke tempat sebelumnya 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 keyboard tambahan mendapatkan dukungan 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.