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.
Hanya tambahkan tabindex ke konten yang interaktif. Meskipun konten itu
penting, seperti gambar utama, pengguna pembaca layar dapat memahaminya tanpa
menambahkan fokus.
Apa itu 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 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
difokus dengan menekan Tab, dan elemen tersebut dapat difokuskan dengan memanggil
metode focus().
tabindex="-1": Menghapus elemen dari urutan tab alami, tetapi elemen
masih dapat difokuskan dengan memanggil metode focus()
tabindex="5": Semua tabindex yang lebih besar dari 0 membawa elemen tersebut ke bagian 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 naik ke atas. Menggunakan tabindex yang lebih besar dari 0 dianggap sebagai
anti-pola.
Memastikan kontrol dapat diakses dari keyboard
Alat seperti Lighthouse sangat bagus dalam mendeteksi masalah aksesibilitas tertentu secara otomatis, tetapi 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 kemampuan fokus kontrol tersebut.
Mengelola fokus di tingkat halaman
Terkadang, tabindex membantu menciptakan pengalaman pengguna yang lancar. Misalnya,
jika Anda membuat satu halaman andal dengan berbagai bagian konten, tempat beberapa
konten disembunyikan pada titik yang berbeda dalam pemuatan halaman. Hal ini dapat berarti
link navigasi mengubah konten yang terlihat, tanpa refresh halaman.
Dalam hal ini, identifikasi area konten yang dipilih dan beri tabindex dari
-1, lalu panggil metode focus. 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 Elemen Kustom.
Mengetahui perilaku keyboard mana yang akan diimplementasikan bisa sulit. Panduan Praktik Menulis Aplikasi Multimedia yang Dapat Diakses (ARIA) mencantumkan jenis komponen dan jenis tindakan keyboard 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>
Tindakan ini akan menghapus elemen dari urutan tab alami, tetapi elemen tersebut tetap dapat
difokus dengan memanggil metode focus().
Menerapkan tabindex="-1" ke elemen tidak akan memengaruhi turunannya.
Jika elemen tersebut 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, sebaiknya gunakan
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 melompatkan elemen ke depan urutan tab
natural. Jika ada beberapa elemen dengan tabindex lebih besar dari 0, urutan tab
dimulai dari nilai terendah yang lebih besar dari nol dan terus berlanjut.
Penggunaan tabindex yang lebih besar dari 0 dianggap sebagai anti-pola karena
pembaca layar membuka halaman dalam urutan DOM, bukan urutan tab. Jika Anda ingin elemen 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 cari
hasil dari audit "Tidak ada elemen yang memiliki nilai [tabindex] lebih besar dari 0".
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. Kontrol ini
dapat difokuskan dan memungkinkan tombol panah menampilkan opsi tambahan yang
dapat dipilih.
Untuk mengimplementasikan fungsi serupa dalam komponen Anda sendiri, Anda dapat menggunakan teknik yang dikenal sebagai "roving tabindex". Roving tabindex bekerja 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.
Saat 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() ke 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>
Resep akses keyboard
Jika tidak yakin tingkat dukungan keyboard apa yang mungkin diperlukan komponen kustom Anda, Anda dapat melihat ARIA Authoring Practices 1.1. Panduan ini mencantumkan pola UI umum dan mengidentifikasi kunci mana yang harus didukung komponen Anda.