Menggunakan tabindex

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Alexandra Klepper
Alexandra Klepper

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.

Dukungan Browser

  • 1
  • 12
  • 1,5
  • ≤4

Sumber

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.