Urutan tab default yang diberikan oleh posisi DOM elemen HTML semantik sangat praktis, tetapi terkadang Anda perlu mengubah urutan tab. Memindahkan elemen pada HTML sangat ideal, tetapi mungkin tidak memungkinkan. Dalam kasus ini, Anda
dapat menggunakan atribut HTML tabindex untuk menetapkan posisi tab
elemen secara eksplisit.
tabindex dapat diterapkan ke elemen apa pun, meskipun tidak selalu
berguna pada setiap elemen, 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.
Hal ini khususnya berlaku untuk elemen non-input seperti header, gambar, atau judul artikel. Jika memungkinkan, sebaiknya atur kode sumber agar urutan DOM menyediakan
urutan tab yang logis. Jika Anda menggunakan tabindex, batasi pada kontrol interaktif kustom
seperti tombol, tab, dropdown, dan kolom teks; yaitu, elemen yang
mungkin akan diberi input oleh pengguna.
Hanya tambahkan tabindex ke konten yang interaktif. Meskipun konten itu penting, seperti gambar utama, 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 lengkap dengan berbagai bagian konten, yang mana tidak semua konten dapat terlihat secara bersamaan. 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 pada komponen kustom.
Misalnya, elemen select dapat menerima fokus dasar, tetapi setelah
itu, Anda dapat menggunakan tombol panah untuk menampilkan opsi tambahan yang dapat dipilih.
Jika Anda mem-build elemen select kustom, penting untuk mereplikasi perilaku
tersebut, sehingga pengguna keyboard masih dapat berinteraksi dengan kontrol Anda.
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.
Mungkin Anda sedang mengerjakan Elemen Kustom yang menyerupai kumpulan tombol pilihan, tetapi dengan tampilan dan perilaku unik yang unik.
<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 yang diperlukan, lihat panduan Praktik PenulisanARIA. Bagian 2 berisi daftar pola desain, termasuk tabel karakteristik untuk grup radio, komponen yang ada yang paling cocok dengan elemen baru Anda.
Salah satu perilaku keyboard umum yang harus didukung adalah tombol panah atas/bawah/kiri/kanan. Untuk menambahkan perilaku ini ke komponen baru, kita menggunakan teknik yang disebut roving tabindex.
Roving tabindex berfungsi dengan menetapkan tabindex ke -1 untuk semua turunan kecuali
yang saat ini 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 peristiwa keyboard untuk menentukan tombol mana yang
ditekan oleh pengguna; jika ini terjadi, komponen akan menyetel tabindex turunan yang sebelumnya difokuskan
ke -1, menyetel tabindex turunan yang akan difokuskan ke 0, dan memanggil
metode fokus padanya.
<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>
Saat pengguna mencapai turunan terakhir (atau pertama, bergantung pada arah pemindahan fokus mereka), fokus akan kembali ke turunan pertama (atau terakhir).
Coba contoh berikut. Periksa elemen di 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 merekam perilaku tab, tetapi mencegah pengguna meninggalkannya hingga prosesnya selesai. Hal ini disebut perangkap keyboard, dan hal ini bisa sangat menjengkelkan bagi pengguna.
Bagian 2.1.2 WCAG menyatakan bahwa fokus keyboard tidak boleh dikunci atau terjebak pada satu elemen halaman tertentu. Pengguna harus dapat membuka dan keluar dari semua elemen halaman hanya dengan menggunakan keyboard.
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 berinteraksi secara tidak sengaja dengan elemen (perangkap keyboard
yang disengaja). Gunakan elemen <dialog>
yang inert secara default, untuk membuat modal bagi pengguna saat memblokir
klik dan tab di luar modal. Dengan begitu, pengguna dapat berfokus pada
pilihan yang diperlukan.