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 bersifat interaktif. Meskipun konten
penting, seperti gambar utama, pengguna pembaca layar dapat memahaminya tanpa
menambahkan fokus.
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 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 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.
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 refresh 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 dirasakan 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. 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 tersebut tetap dapat
difokus 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
dimulai dari nilai terendah yang lebih besar dari nol dan terus berlanjut.
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 dari 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. 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 kemudian menggunakan pemroses peristiwa keyboard
untuk menentukan tombol mana yang telah ditekan pengguna.
Jika hal ini terjadi, komponen akan menetapkan tabindex
turunan yang sebelumnya difokuskan
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>
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.