Apa atribut HTML tabindex?

Untuk apa tabindexatribut yang digunakan dalam HTML?

tabindexadalah atribut global yang bertanggung jawab untuk dua hal:

1. itu mengatur urutan elemen "fokus" dan
2. itu membuat elemen "fokus" .

Dalam pikiran saya hal kedua bahkan lebih penting daripada yang pertama. Ada sangat sedikit elemen yang dapat difokus secara default (mis. <a> dan kontrol formulir). Pengembang sangat sering menambahkan beberapa penangan acara JavaScript (seperti 'klik') pada elemen yang tidak dapat fokus (<div>, <span>, dan sebagainya), dan cara membuat antarmuka Anda menjadi responsif tidak hanya untuk peristiwa mouse tetapi juga pada acara keyboard (misalnya 'onkeypress') adalah untuk membuat elemen-elemen seperti itu bisa fokus. Terakhir, jika Anda tidak ingin mengatur pesanan tetapi buat elemen Anda bisa fokus digunakan tabindex="0"pada semua elemen seperti itu:

<div tabindex="0"></div>

Juga, jika Anda tidak ingin fokus melalui tombol tab maka gunakan tabindex="-1". Misalnya, tautan di bawah ini tidak akan difokuskan saat menggunakan tombol tab untuk melintas.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Ketika pengguna menekan tombol tab pengguna akan diambil melalui formulir dalam urutan 1, 2, dan 3 seperti ditunjukkan dalam contoh di bawah ini.

Sebagai contoh:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Itu tabindexdigunakan untuk menentukan urutan yang diikuti pengguna ketika mereka menggunakan tombol Tab untuk menavigasi halaman. Secara default, urutan tabbing alami akan cocok dengan urutan sumber di markup.

Atribut konten tabindex memungkinkan penulis untuk mengontrol apakah suatu elemen seharusnya menjadi fokus, apakah itu seharusnya dapat dijangkau menggunakan navigasi fokus sekuensial, dan apa yang menjadi urutan relatif elemen untuk tujuan navigasi fokus sekuensial. Nama "indeks tab" berasal dari penggunaan umum tombol "tab" untuk bernavigasi melalui elemen-elemen yang dapat difokuskan. Istilah "tabbing" mengacu pada bergerak maju melalui elemen-elemen fokus yang dapat dicapai menggunakan navigasi fokus berurutan.
Rekomendasi W3C: HTML5
Bagian 7.4.1 Navigasi fokus berurutan dan atribut tabindex

The tabindexdimulai pada 0 atau bilangan positif dan bertahap ke atas. Ini umum untuk melihat nilai 0 dihindari karena dalam versi Mozilla dan IE yang lebih lama, tabindex akan mulai dari 1, beralih ke 2, dan hanya setelah 2 akan menjadi 0 dan kemudian 3. Nilai integer maksimum tabindexadalah 32767. Jika elemen memiliki hal yang sama tabindexmaka tabindex akan cocok dengan urutan sumber di markup. Nilai negatif akan menghapus elemen dari indeks tab sehingga tidak akan pernah fokus.

Jika elemen diberi tabindexdari -1itu akan menghapus elemen dan itu tidak akan pernah focusable tetapi fokus dapat diberikan ke elemen pemrograman menggunakan element.focus().

Jika Anda menentukan tabindexatribut tanpa nilai atau nilai kosong itu akan diabaikan.

Jika disabledatribut diatur pada elemen yang memiliki tabindex, elemen tersebut akan diabaikan.

Jika a tabindexdiatur di mana saja di dalam halaman terlepas dari di mana itu terkait dengan sisa kode (bisa di footer, area konten, di mana pun) jika ada yang ditentukan tabindexmaka urutan tab akan mulai pada elemen yang secara eksplisit diberi nilai terendah di tabindexatas 0. Kemudian akan melalui elemen-elemen yang didefinisikan dan hanya setelah tabindexelemen-elemen eksplisit telah ditabrak, akan kembali ke awal dokumen dan mengikuti urutan tab alami.

Dalam spesifikasi HTML4 hanya elemen berikut yang mendukung atribut tabindex: jangkar, daerah, tombol, memasukkan, obyek, Pilih, dan textarea. Tetapi spesifikasi HTML5, dengan mempertimbangkan aksesibilitas, memungkinkan semua elemen ditugaskan tabindex.

-

Sebagai contoh

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

sama dengan

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

karena terlepas dari kenyataan bahwa mereka semua ditugaskan tabindex="1", mereka masih akan mengikuti urutan yang sama, yang pertama adalah yang pertama, dan yang terakhir adalah yang terakhir. Ini juga sama ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

karena Anda tidak perlu mendefinisikan tabIndex secara eksplisit jika itu adalah perilaku default. A divsecara default tidak akan fokus, anchortag akan.

Mengontrol urutan tabing (menekan tabtombol untuk memindahkan fokus) di dalam halaman.

Referensi: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

nilai yang Anda tetapkan menentukan urutan fokus keyboard Anda yang akan bergerak di antara elemen-elemen di situs web.

Pada contoh berikut, pertama kali Anda menekan tab, kursor Anda akan pindah ke #foo, lalu #awesome, lalu #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Jika Anda belum menetapkan indeks tab di mana pun, fokus keyboard akan mengikuti tag HTML halaman Anda sesuai urutan yang didefinisikan dalam dokumen HTML.

Jika Anda tab lebih banyak daripada tabindex yang Anda tentukan, fokus akan bergerak seolah-olah tidak ada tabindex, yaitu dalam urutan penampilan dari tag HTML

Ini dapat digunakan untuk mengubah urutan navigasi fokus elemen form default.

Jadi, jika Anda punya:

text input A

text input B

submit button C

dengan menggunakan tombol tab Anda menavigasi melalui A-> B-> C. Tabindex memungkinkan Anda untuk mengubah aliran itu.

Biasanya, ketika pengguna tab dari bidang ke bidang dalam formulir (di browser yang memungkinkan tab, tidak semua browser lakukan) urutannya adalah urutan bidang yang muncul dalam kode HTML.

Namun, terkadang Anda ingin urutan tab mengalir sedikit berbeda. Dalam hal ini, Anda bisa memberi nomor pada bidang menggunakan TABINDEX. Tab kemudian mengalir secara berurutan dari TABINDEX terendah ke tertinggi.

Info lebih lanjut tentang ini dapat ditemukan di sini w3

ilustrasi lain yang baik dapat ditemukan di sini

Dengan kata sederhana, tabindexdigunakan untuk fokus pada elemen. Sintaks: tabindex="numeric_value" Ini numeric_valueadalah bobot elemen. Nilai yang lebih rendah akan diakses terlebih dahulu.

Atribut tabindex HTML bertanggung jawab untuk menunjukkan apakah suatu elemen dapat dijangkau oleh navigasi keyboard . Saat pengguna menekan tombol Tab , fokus dialihkan dari satu elemen ke elemen lainnya. Dengan menggunakan atribut tabindex, aliran urutan tab digeser.

Tab melalui kontrol biasanya terjadi secara berurutan seperti yang muncul pada kode HTML.

Menggunakan tabindex, tabbing akan mengalir dari kontrol dengan tabindex terendah ke kontrol dengan tabindex tertinggi dalam urutan sekuensial tabindex