Tabindex tidak Logis

Noted: Monday, April 12, 2010 at 10:49:12. Words count: 483.
Last updated: Sunday, November 12, 2017 at 21:46:25.

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.

Dani Iswara, [myfirstnamelastname]@gmail.com.

9 comments to "Tabindex tidak Logis"

  1. Cahya

    Apa text area juga memerlukan tabindex?

  2. dani

    Cahya,
    tidak, jika tidak perlu diisi. :P

  3. Cahya

    Tapi yang di konten di atas kok ada?

  4. dani

    Cahya,
    teorinya belakangan, tabindex kan ngga wajib lagi.
    Jika input punya tabindex, masak textarea (kolom komentar) ngga?
    Kalo textarea yang berisi kumpulan links, sepertinya bukan pada tempatnya sesuai makna semantik. cmiiw :)

  5. Aldy

    Berarti pemahaman saya selama ada yang salah, tab index kebanyakan hanya diterapkan pada isian kolom komentar pada blog.
    Akibatnya pada halaman posting menjadi tidak logis ( loncat ).

    Tapi dari beberapa template kelas premium yang nota bene orang mahir coding ( nggak berfikiran semantik ?), tabindex juga hanya pada area komentar.
    Apa ini masuk kategori tidak valid HTML bli ?

  6. dani

    Pak Aldy,
    jika tabindex hanya pada area komentar, diasumsikan bahwa pengunjung pasti berniat meninggalkan komentar saat Tab pertama dipakai. Entah jika ada pertimbangan lain.

    Sepertinya tidak berhubungan dengan validasi XHTML, pak.

  7. Tinjauan Blog Cekerholic.com - Unessential Weblog

    […] di kolom isian komentar. Yakin tag ini berfungsi sebagaimana mestinya? Karena kadang pemakaian tabindex tidak logis (Dani Iswara […]

  8. Membiasakan Penggunaan Tombol TAB Saat Mengisi Form | KafeGue.com

    […] dulu, baru setelah itu diikuti dengan form input dan tombol submit. Solusi lain, coba baca tentang Tabindex Tidak Logis (lagi-lagi di blog […]

  9. Posisi Permalink Tiap Komentar – Unessential Weblog

    […] urutan tabindex yang tidak logis, […]