Tabindex tidak Logis

Diperbarui 12 November 2017 oleh Dani Iswara

Atribut tabindex digunakan untuk menentukan posisi kursor atau efek :focus saat menelusuri dokumen Web memakai tombol Tab. Dengan tabindex, urutan navigasi bisa ditentukan dengan setelan tertentu.

Hal ini dikenal juga dengan teknik ‘tabbing navigation’. Bermanfaat bagi pengguna yang memilih menelusuri halaman Web dengan papan ketik/’keyboard’. Atau bagi yang tidak mampu memakai tetikus/’mouse’. Saat menekan tombol Tab di peramban Web Google Chrome dan Firefox terbaru (tiap peramban mungkin memiliki setelan tombol standar berbeda, misalnya Opera 7+), kursor akan lompat antar elemen input, textarea, tombol, area, object, select, dan pranala.

Struktur tabindex

Kode XHTML-nya seperti ini:

...
<input type="text" id="s" name="s" tabindex="1" value=" " />
<input type="submit" id="searchbutton" name="searchbutton" tabindex="2" value="Search" />
...
<input type="text" id="name" name="name" tabindex="3" value=" " />
<input type="text" id="email" name="email" tabindex="4" value="" />
<input type="text" id="url" name="url" tabindex="5" value=" " />
<input type="submit" id="sendcomment" name="sendcomment" tabindex="6" value="Send Comment" />
...

Nilai tabindex bisa diisi antara 0 hingga 32767. Peramban Web dan ‘user agents’ lain akan mengabaikan nilai 0. Urutan dimulai dari nilai numerik terkecil ke yang lebih besar. Jika ada elemen yang memiliki nilai tabindex sama, yang muncul pertama kali akan mendapat fokus terlebih dulu. Elemen yang tidak memiliki tabindex akan mendapat giliran belakangan. Jika tabindex tidak ditentukan sama sekali atau dokumen tidak memakai fitur tabindex, peramban bisa menentukan urutan ‘tabbing’ otomatis.

Tabindex bermasalah

Yang membingungkan adalah jika pemakaian tabindex tidak logis. Misalnya kondisi di bawah:

1. Yakin pengguna butuh tabindex? Saat membuka halaman Web ‘ecommerce’ lalu menekan tombol Tab, fokus kursor melompat ke tombol “Buy This”. Yakin pengunjung akan langsung membeli produk? Atau langsung lompat ke isian nama, padahal belum tentu ingin berkomentar? Bisa juga malah ke kolom isian langganan pasokan RSS? Benar mau berlangganan? Terutama bagi pengunjung yang hanya berniat membaca-baca dulu sebelum memutuskan ‘action’ tertentu.
2. Tabindex tidak lengkap. Ada banyak formulir isian di dokumen Web. Bukan hanya kotak pencarian dan kolom komentar seperti contoh struktur di atas. Dan ternyata tidak semuanya memakai tabindex. Tidak konsisten. Fokus kursor akan melompat secara tidak logis.
3. Nilai tabindex tidak berurutan. Di laman atau halaman depan, kolom pencarian dan langganan via surat elektronik/surel seharusnya memiliki nilai tabindex lebih kecil. Tapi ternyata, kolom isian komentar malah memiliki nilai yang lebih kecil. Sehinggga, jika di laman, tombol Tab akan memberi fokus ke kotak pencarian. Tapi di halaman ‘posting’, tombol Tab akan fokus ke kolom isian nama pengomentar terlebih dahulu. Masalah ini bisa diatasi dengan Automatic tabindex using PHP.
4. Tanpa memakai fitur tabindex. Lepas dari semua masalah di atas. Dengan menekan tombol Tab di kondisi ketiga ini, kursor bisa fokus antar elemen pranala, ‘input’, tombol dan elemen lainnya dengan lebih logis. Kondisi ketiga ini lebih dianjurkan saat ini.

Lalu kapan pemakaian tabindex yang lebih tepat? Tabindex silakan dipakai dengan urutan yang logis jika memang suatu formulir isian harus diisi berurutan sesuai prioritas. Seperti pada pengisian kuesioner atau data diri yang kompleks.
Jika tidak, umumnya direkomendasikan untuk menanggalkan elemen tabindex saat ini. Walau dulu memang dianjurkan untuk dipakai.