Urutan tab default yang disediakan oleh posisi DOM elemen HTML semantik adalah
mudah, tetapi mungkin ada kalanya Anda perlu
mengubah urutan tab. Pindahan
dalam HTML adalah ideal, tetapi mungkin tidak memungkinkan. Dalam kasus ini, Anda
dapat menggunakan atribut HTML tabindex untuk menetapkan tab elemen secara eksplisit
posisi Anda.
tabindex dapat diterapkan ke elemen apa pun, meskipun belum tentu
berguna pada setiap elemen, 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().
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.
Hal ini terutama berlaku untuk elemen non-input seperti {i>header<i}, gambar, atau artikel
judul. Jika memungkinkan, sebaiknya atur kode sumber agar urutan DOM menyediakan
urutan tab yang logis. Jika Anda menggunakan tabindex, batasi ke interaktif kustom
kontrol seperti tombol, tab, {i>dropdown<i}, dan bidang teks; yaitu, elemen yang
yang mungkin akan diberi input oleh pengguna.
Hanya tambahkan tabindex ke konten yang interaktif. Meskipun konten itu penting, seperti gambar kunci, pengguna pembaca layar dapat memahaminya tanpa
menambahkan fokus.
Mengelola fokus di tingkat halaman
Terkadang, tabindex diperlukan untuk pengalaman pengguna yang lancar. Misalnya,
jika Anda membuat satu halaman yang lengkap
dengan berbagai bagian konten, namun
semua konten terlihat secara bersamaan. Ini bisa 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 komponen kustom.
Misalnya, elemen select dapat menerima fokus dasar, tetapi setelah
di sana, Anda dapat menggunakan tombol panah untuk
menampilkan opsi tambahan yang dapat dipilih.
Jika Anda membuat elemen select kustom, penting untuk mereplikasi elemen tersebut
sehingga pengguna {i>keyboard<i} masih
dapat berinteraksi dengan kontrol Anda.
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.
Mungkin Anda sedang mengerjakan Elemen Khusus yang menyerupai satu set tombol radio, tetapi dengan tampilan dan nuansa unik Anda perilaku model.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Untuk menentukan dukungan keyboard apa yang mereka butuhkan, periksa Praktik Penulisan ARIAA panduan kami. Bagian 2 berisi daftar pola desain, termasuk tabel karakteristik untuk radio grup, komponen yang ada yang paling mendekati elemen baru Anda.
Salah satu perilaku {i>keyboard<i} umum yang harus didukung adalah tombol panah atas/bawah/kiri/kanan. Untuk menambahkan perilaku ini ke kita menggunakan teknik yang disebut roving tabindex.
Roving tabindex berfungsi dengan menyetel tabindex ke -1 untuk semua turunan kecuali
yang sedang aktif.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Komponen ini menggunakan pemroses kejadian keyboard untuk menentukan tombol mana
penekanan oleh pengguna; ketika ini terjadi, hal itu akan menyetel atribut
tabindex ke -1, menetapkan tabindex turunan yang akan difokuskan ke 0, dan memanggil metode
fokus metode tersebut.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Ketika pengguna mencapai yang terakhir (atau pertama, tergantung pada arah mereka memindahkan fokus), fokus memutar kembali ke sekitar pertama (atau terakhir) anak.
Coba contoh berikut. Periksa elemen pada DevTools untuk mengamati pergerakan tabindex dari satu radio ke radio berikutnya.
Modal dan perangkap keyboard
Sebaiknya hindari mengelola fokus secara manual, karena dapat menyebabkan situasi yang rumit. Misalnya, widget pelengkapan otomatis yang mencoba mengelola fokus dan mengambil gambar perilaku tab, tetapi mencegah pengguna meninggalkannya hingga selesai. Hal ini disebut perangkap keyboard, dan hal ini bisa sangat menjengkelkan bagi pengguna.
Pasal 2.1.2 WCAG menyatakan bahwa fokus keyboard tidak boleh dikunci atau terjebak di satu elemen halaman tertentu. Pengguna harus dapat menavigasi ke dan dari semua elemen laman dengan hanya menggunakan {i>keyboard<i}.
Pengecualian untuk aturan ini adalah modal. Namun, Anda tetap harus
menghindari penggunaan
tabindex saat membuat modal. Dengan inert, Anda dapat
memastikan bahwa pengguna tidak dapat secara
tidak sengaja berinteraksi dengan suatu elemen
jebakan keyboard). Menggunakan <dialog>
, yang secara default inert, untuk membuat modal bagi pengguna saat memblokir
klik dan tab di luar modal. Hal ini memungkinkan pengguna untuk fokus pada
pilihan yang diperlukan.