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